Question

我有一个可滚动的div，我想阻止用户一旦到达某个点就向下滚动更远，只允许他们在没有jquery的情况下向上滚动

fixed.addEventListener('mousewheel', function(e) {
   if((fixed.scrollTop;+500)>fixed.scrollHeight;){
      e.preventDefault();
      }
   }, false);

目前我所做的工作就是一旦到达那一点就停止一起滚动。一旦它进入if语句，我希望用户能够向上滚动。不要停止所有滚动

Answer 1

mousewheel事件不是标准事件，请参阅https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel

但即使是这样，您的解决方案也不会覆盖触摸设备，或者通过拖动滚动条进行滚动。通常，一旦滚动正在进行中，它就无法停止，您可以首先防止它发生，例如在触摸设备上：

window.addEventListener('touchmove', function(e) {
    e.preventDefault();
});

然而，这是非常糟糕的做法，因为它会完全关闭滚动和缩放。

你遇到的问题是你无法确定滚动方向。我看到的唯一方法是查看scroll事件，确定页面滚动是向上还是向下，然后在元素上设置scrollTo，如果您不想这样做，但它可能会导致尴尬的跳跃。

例如：

var lastScrollPosition = fixed.scrollTop;

fixed.addEventListener('scroll', function () {
    var goingDown = (fixed.scrollTop - lastScrollPosition) > 0;
    /* If scrolling down the new scrollTop will be larger
        than the last one so it will be a positive number
        and we want to stop that from happening
    */
    var maximumScrollReached = (fixed.scrollTop + 500 > fixed.scrollHeight);

    if (goingDown && maximumScrollReached) {
        fixed.scrollTop = lastScrollPosition; // Or whatever maximum you want to allow
    }

    lastScrollPosition = fixed.scrollTop;
});

请注意scroll事件可以激活很多，因此您可以考虑将其包含在某种debounce函数中，如https://lodash.com/docs/4.16.4#debounce或自己编写

另外你为什么要考虑这个？对于您的原始问题可能有更好的解决方案，可能是一些纯CSS。

如果滚动到顶部或底部div

1 个答案: