防止鼠標滾輪滾動，但不是滾動條事件。 JavaScript

Question

我需要使網頁只能通過滾動條滾動。 我試圖找到如何捕捉滾動條事件，但我認為這是不可能的。 目前我使用這個功能：

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}
function wheel(e) {
    preventDefault(e);
}
function disable_scroll() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
}

但它們在我的情況下不是很有用，因為它們會阻止所有滾動事件。 你有什么想法？ 我已經考慮了 3 天，但我沒有找到任何答案（還有問題）。 謝謝！

Answer 1

防止窗口用鼠標滾輪滾動：

由於文檔級別的wheel事件偵聽器被視為 Passive ，我們需要將此事件偵聽器標記為Active ：

window.addEventListener("wheel", e => e.preventDefault(), { passive:false })

如果<div> （或其他元素）的內容是可滾動的，您可以像這樣阻止它：

document.getElementById('{element-id}').onwheel = function(){ return false; }

有關滾動干預和使用被動偵聽器提高滾動性能的更多信息。

---

過時的方法：
window.onwheel = function(){ return false; } // Old Method
更多信息（感謝@MatthewMorrone）

Answer 2

防止鼠標滾輪滾動窗口的jQuery解決方案：

$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});

如果您想防止在單個 DOM 元素中使用鼠標滾輪滾動，請嘗試以下操作：

$('#{element-id}').bind('mousewheel DOMMouseScroll', function (e) { return false; });

DOMMouseScroll事件在 Firefox 中使用，因此您必須同時監聽兩者。

Answer 3

我目前正在使用它，它工作正常。 使用欄滾動工作正常，但鼠標滾輪不起作用。

我這樣做的原因是我有自定義代碼可以按我想要的方式滾動，但是如果不添加任何代碼，它就不會滾動滾輪。

window.addEventListener('wheel', function(e) {  
    e.preventDefault();
    // add custom scroll code if you want
}