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

不使用 jQuery 检测滚动方向

确定滚动方向对于增强用户体验至关重要。虽然 jQuery 简化了此任务，但使用普通 JavaScript 也可以实现类似的功能。

理解问题

提供的代码尝试通过比较当前的scrollTop 来检测滚动方向值为零。然而，这种方法是有缺陷的，因为它假设滚动总是从零开始。实际上，滚动位置可以是任何值。

手动检测滚动方向

检测滚动方向的关键是存储之前的scrollTop值并将其与当前值。当当前值大于前一个值时，滚动向下移动。相反，如果当前值小于前一个值，则滚动向上移动。

实现

以下 JavaScript 代码片段演示了如何检测滚动方向：

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

// Add event listener to the target element
element.addEventListener("scroll", function () {
  // Get the current scroll position
  var st = window.pageYOffset || document.documentElement.scrollTop;

  // Compare the current and previous scroll positions
  if (st > lastScrollTop) {
    // Downscroll code
  } else if (st < lastScrollTop) {
    // Upscroll code
  } else {
    // Horizontal scroll
  }

  // Update the lastScrollTop value
  lastScrollTop = st <= 0 ? 0 : st;
}, false);</code>

确保兼容性

此代码应该适用于大多数现代浏览器。但是，为了向后兼容，建议使用 window.pageYOffset 或 document.documentElement.scrollTop 属性来获取滚动位置。此外，lastScrollTop 变量应初始化为零，以处理负滚动或移动设备上的滚动。

结论

通过利用本文中描述的方法，您可以使用原生 JavaScript 有效检测滚动方向。该技术对于实现延迟加载、无限滚动和平滑滚动等功能特别有用。

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