1

我正在使用pagePiling.js创建一页滚动效果。在其中一个分页部分中，我有一个可滚动的子 div。当用户到达其中包含可滚动 div 的部分时，我希望他们能够在每次通过鼠标滚轮向下滚动时滚动到可滚动 div 中每个段落的顶部。

这里的问题是当我将鼠标滚轮移动一个“滴答”（因为没有更好的术语）时，鼠标滚轮/滚轮事件会触发 2 次、4 次、12 次甚至 21 次，但我只希望它火一次。否则我的函数会频繁触发并且滚动体验很差。当我专门在可滚动容器内滚动或在部分之间来回跳转并尝试再次滚动可滚动容器时，滚轮事件的数量开始跳跃。

到目前为止，我过去曾尝试使用 addEventListener() 实现 lodash.js 和 debounce/throttle 方法，但在单个滚轮滴答之后我仍然收到多个鼠标事件，类似于我上面描述的。

我在这里创建了一个codepen来展示我到目前为止所拥有的东西。我的问题从鼠标悬停功能开始，这是我迄今为止一直在使用的：

$('.overflow-section').on('wheel', function(e) {
    var oEvent = e.originalEvent,
    delta  = oEvent.deltaY || oEvent.wheelDelta;
    if (delta > 0) {
        $('#scrollable-container').animate({
            scrollTop: $("#section-two").offset().top
        });
    } else {
        $('#scrollable-container').animate({
            scrollTop: $("#section-one")
        });
    }
});

一旦我滚动到底部，当我勾选一次滚轮时，控制台会输出 6 个滚轮事件，但它应该只触发一次。

4

1 回答 1

0

您可以查看Letarghy 库。这是解决“动态滚动”问题的尝试，这是您的情况。

请注意，它并不完美，因为在某些设备中实际上无法检测到单次滑动/滚动。在这种情况下，将应用延迟。

于 2019-08-28T20:21:05.913 回答