HTML中PDF鼠标滚轮缩放功能的启用与禁用实现方案

你当前尝试用removeEventListener移除滚轮事件监听器失败，核心原因是移除监听器必须和添加时使用完全相同的函数引用，且反复绑定/解绑事件不如用状态开关更可靠。下面是直接可用的解决方案：

修改后的完整JavaScript代码 #

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
// 新增开关变量，控制滚轮缩放是否生效
var isScrollZoomEnabled = true;

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) {
    // 开关关闭时直接终止逻辑
    if (!isScrollZoomEnabled) return;
    
    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(){
    isScrollZoomEnabled = false;
}

// 实现启用逻辑
function enable_scroll(){
    isScrollZoomEnabled = true;
}

方案说明 #

1. 状态开关控制：新增isScrollZoomEnabled变量作为开关，避免反复绑定/解绑事件的繁琐操作和状态混乱。
2. 事件逻辑拦截：在zoomWithWheel函数开头判断开关状态，禁用时直接终止后续缩放逻辑。
3. 极简启用/禁用函数：无需操作事件监听器，只需修改开关变量值即可完成状态切换，逻辑简洁可靠。

原方法失败原因 #

removeEventListener要求必须传入和添加时完全相同的函数引用，如果函数引用不一致（比如用匿名函数、重新定义函数），就无法成功移除监听器。此外，反复绑定/解绑事件容易引发不可控的状态问题，开关变量的方式更适合这类动态控制场景。

内容的提问来源于stack exchange，提问作者Buzz Su