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

使用jQuery快速完成时防止滚动

1 个答案: