javascript - 使用 jQuery 防止滚动速度过快

Question

为了防止鼠标滚轮滚动到具有自己的滚动条的元素的顶部/底部时滚动整个页面，我使用 Brandon Aaron 的 Mousewheel plugin .

只要我不滚动得太快，这就可以正常工作。看起来，当滚动得非常快时，两个事件将通过“我尚未到达顶部/底部”检查，并且都将被执行。然而，其中一个会将元素滚动到顶部/底部，而下一个将滚动整个页面，这正是我试图阻止的。

我现在正在做这个

$('.popupContents').bind('mousewheel', function (e, d) {
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    } else if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
         e.preventDefault();
    }
});

(发布于Prevent scrolling of parent element?)

即使用户快速滚动，如何使该函数正确停止顶部/底部的所有事件？

Answer 1

我最终手动跟踪所需的滚动位置并完全禁止正常的滚动事件。

var wantedScrollTop = 0;
$('.popupBody').bind('mousewheel', function (e, d) {
    var t = $(this);
    var scrollTo;
    if (d > 0) {
        scrollTo = Math.max(0, wantedScrollTop - 30);
    } else if (d < 0) {
        scrollTo = Math.min(t.get(0).scrollHeight - t.innerHeight(), wantedScrollTop + 30);
    }
    if (typeof scrollTo !== "undefined") {
        wantedScrollTop = scrollTo;
        t.scrollTop(wantedScrollTop);
        //t.stop().animate({ scrollTop: wantedScrollTop + 'px' }, 150);
    }
    e.preventDefault();
});

d 是滚动方向，因此我在此处手动跟踪所需的滚动位置。就我而言，一次只有一个弹出窗口，因此我没有费心将 wantedScrollTop 粘贴在 data- 属性或元素上的类似内容中，这可能是当您有多个需要跟踪自己的滚动位置的元素时很有用。

它不像浏览器那样进行流畅的滚动，但每次滚轮触发事件时，它都会将垂直滚动位置更改 30 像素。我在代码中留下了注释掉的行，以展示如何实现这一点。然而，对我来说，这导致滚动在快速滚动时感觉非常滞后。