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

How to remove jitter from elements on which scrolling is prevented

本文关键字：元素 抖动 滚动      更新时间：2023-09-26

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

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

Demo: 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/。但是，这对键事件不起作用。

相关文章：