Javascript 在 HTML 中启用和禁用滚动功能

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>