Question

请先查看其他问题：Mouse wheel scroll event和the demo from the accepted answer。

如何在取消滚动事件时减少抖动？

Answer 1

在answer to your original question的基础上，您可以执行以下操作：

var noscroll = document.getElementById('noscroll');

var locked, lockedX, lockedY;
noscroll.addEventListener('mouseover', function (){
    locked = true;
    lockedX = window.scrollX;
    lockedY = window.scrollY;
}, false);
noscroll.addEventListener('mouseout', function (){
    locked = false;
}, false);

// changes

$(window).on("mousewheel keydown", function(e){
    if(locked === true){
        return false;
    }
});

$(window).on("scroll", function(e){
    if(locked === true){
        // add fallback here for other scenarios
    }
});

我正在使用jQuery来简化/标准化事件处理。

请注意，可能不希望阻止关键事件;我将其包括在内以显示如何防止箭头键（您还可以检查特定的键代码）。

我还为mousewheel/keydown未处理的方案添加了一般回退处理程序。

这可能不适用于触摸事件（或根本不适用）。最重要的是，请确保它不会混淆您的用户或删除预期的功能。

如果您只想处理鼠标滚轮，可能会更简单：

$("#noscroll").on("mousewheel", function(e){
    return false;
});

演示：http://jsfiddle.net/HUGTL/3/。但是，这不适用于关键事件。

如何从阻止滚动的元素中删除抖动

1 个答案: