javascript - 如何从阻止滚动的元素中消除抖动

Question

请先看另一个问题：鼠标滚轮滚动事件和接受答案中的演示。

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

Answer 1

演示：http: //jsfiddle.net/HUGTL/

基于对原始问题的回答，您可以执行以下操作：

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/。但是，这不适用于关键事件。