Enable and Disable Scroll Function in HTML

March 12, 2023

var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var PDFRenderingInProgress = false
var pdfDoc = null
var canvas = document.getElementById('the-canvas')
var ctx = canvas.getContext('2d');
var container = document.getElementById("div-container")

var url = 'https://d3bxy9euw4e147.cloudfront.net/oscms-prodcms/media/documents/Physics-WEB_Sab7RrQ.pdf';


var wheelTimeoutHandler = null;
var wheelTimeout = 250 //ms

function renderPage(scale) {
    pdfDoc.getPage(1).then(function(page) {
        var viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        if (!PDFRenderingInProgress) {
            PDFRenderingInProgress = true
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function() {
                PDFRenderingInProgress = false
            })
        }
  });
}

function zoomWithWheel(event) {
    panzoom.zoomWithWheel(event)
    clearTimeout(wheelTimeoutHandler);
    wheelTimeoutHandler = setTimeout(function() {
        canvas.style.transform = "scale("+1/panzoom.getScale()+")"
        if (pdfDoc)
            renderPage(panzoom.getScale());
    }, wheelTimeout)
}

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    renderPage(1);
});

var panzoom = Panzoom(container)
container.parentElement.addEventListener('wheel', zoomWithWheel)


function disable_scroll(){}

function enable_scroll(){}

#the-canvas {
  direction: ltr;
  transform-origin: top left;
}
#div-container {
  width: 400px;
  height: 400px;
}

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>

<button onclick="disable_scroll()">Disable Scroll Zoom</button>
<button onclick="enable_scroll()">Enable Scroll Zoom</button>


<div id="div-container">
  <canvas id="the-canvas"></canvas>
</div>

Above is a working code HTML with Scroll Zoom Functionality using the Wheel of Your Mouse,may I know how to enable and enable or disable the scroll of the mouse so that the PDF can be zoom-enabled and zoom-disabled?

I have tried to remove the event listener to disable it, but it does not work, unfortunately. I will really appreciate any help I can get 🙂

button.removeEventListener(“click”, myFunction);

>Solution :

To do what you require you can use a single button to toggle the binding of the wheel event to the zoomWithWheel function, like this. Note the use of the data attribute to maintain state of the zoom toggle.

document.querySelector('#scroll-toggle').addEventListener('click', e => {
  const enabled = e.target.dataset.enabled == 'true'; // as dataset returns a string
  e.target.textContent = enabled ? 'Enable scroll zoom' : 'Disable scroll zoom';
  container.parentElement[enabled ? 'removeEventListener' : 'addEventListener']('wheel', zoomWithWheel)
  e.target.dataset.enabled = !enabled;
});

const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
let PDFRenderingInProgress = false
let pdfDoc = null
let canvas = document.getElementById('the-canvas')
let ctx = canvas.getContext('2d');
let container = document.getElementById("div-container")

let url = 'https://d3bxy9euw4e147.cloudfront.net/oscms-prodcms/media/documents/Physics-WEB_Sab7RrQ.pdf';
let wheelTimeoutHandler = null;
let wheelTimeout = 250 //ms

function renderPage(scale) {
  pdfDoc.getPage(1).then(function(page) {
    var viewport = page.getViewport({
      scale: scale
    });
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };

    if (!PDFRenderingInProgress) {
      PDFRenderingInProgress = true
      var renderTask = page.render(renderContext);
      renderTask.promise.then(function() {
        PDFRenderingInProgress = false
      })
    }
  });
}

function zoomWithWheel(event) {
  panzoom.zoomWithWheel(event)
  clearTimeout(wheelTimeoutHandler);
  wheelTimeoutHandler = setTimeout(function() {
    canvas.style.transform = "scale(" + 1 / panzoom.getScale() + ")"
    if (pdfDoc)
      renderPage(panzoom.getScale());
  }, wheelTimeout)
}

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  renderPage(1);
});

const panzoom = Panzoom(container);

document.querySelector('#scroll-toggle').addEventListener('click', e => {
  const enabled = e.target.dataset.enabled == 'true'; // as dataset returns a string
  e.target.textContent = enabled ? 'Enable scroll zoom' : 'Disable scroll zoom';
  container.parentElement[enabled ? 'removeEventListener' : 'addEventListener']('wheel', zoomWithWheel)
  e.target.dataset.enabled = !enabled;
});

#the-canvas {
  direction: ltr;
  transform-origin: top left;
}

#div-container {
  width: 400px;
  height: 400px;
}

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>

<button id="scroll-toggle" data-enabled="false">Enable Scroll Zoom</button>


<div id="div-container">
  <canvas id="the-canvas"></canvas>
</div>