Javascript 如何消除阻止滚动的元素的抖动

请先看另一个问题：和

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

演示：

基于，您可以执行以下操作：

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简化/标准化事件处理

注意，防止关键事件可能不可取；我将其包括在内，以说明如何防止箭头键（您还可以检查特定的键代码）

我还为

mouseweel/keydown

无法处理的场景添加了一个通用的回退处理程序

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

如果您只想操作鼠标滚轮，它可能会简单得多：

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

---

演示：。但是，这对关键事件不起作用。

花费的时间有点长，我尝试了一下，得到了相同的结果。问题是，当取消滚动事件时，如何减少抖动？就像在地图中一样，当我滚动鼠标滚轮时，页面没有抖动效果。我认为唯一的方法是在滚动发生之前取消事件（例如，在mouseheel/keydown上返回false

）。一旦滚动开始，我就找不到平滑它的方法。好的，我知道你的意思。谢谢你的建议，我会试试。关于地图（至少谷歌地图）看起来他们处理所有的事件，从不让它们在窗口中滚动。所以他们会对鼠标滚轮、单击、拖动等做出反应。移动地图并返回false。这就是我想要做的最终效果，哈哈。