1

为了防止鼠标滚轮在到达带有自己滚动条的元素的顶部/底部时滚动整个页面，我正在使用 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();
    }
});

（如防止滚动父元素？）

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

4

1 回答 1

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 像素。我在代码中留下了注释掉的行，以展示如何实现这一点。然而，对我来说，这导致滚动在快速滚动时感觉非常滞后。

于 2013-07-09T11:06:28.457 回答