如何在没有 jQuery 的情况下确定 JavaScript 中的滚动方向？

不使用 jQuery 检测滚动方向

在 Web 开发中，检测滚动方向对于实现无限滚动或折叠等功能非常有用工具栏。虽然像 jQuery 这样的库提供了简单的解决方案，但让我们探索如何在不使用它们的情况下实现这一点。

要确定滚动方向，我们可以跟踪先前的滚动位置（scrollTop 或 pageYOffset）并将其与当前滚动进行比较位置。这种差异表明我们是向上还是向下滚动。

下面是演示此方法的 JavaScript 片段：

<code class="javascript">var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop) {
      // downscroll code
   } else if (st < lastScrollTop) {
      // upscroll code
   } // else was horizontal scroll
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);</code>

在此代码中，我们检查当前滚动位置是否大于或小于上一个滚动位置。如果它更大，我们将向下滚动，如果它更小，我们将向上滚动。水平滚动也是通过检查滚动位置是否不变来考虑的。

通过存储之前的滚动位置并将其与当前位置进行比较，我们可以有效地检测滚动方向，而不需要外部库。该方法可以应用于各种元素，包括用于全局滚动检测的窗口对象。

以上是如何在没有 jQuery 的情况下确定 JavaScript 中的滚动方向？的详细内容。更多信息请关注PHP中文网其他相关文章！