How to Detect Scroll Direction in JavaScript Without jQuery?

Detecting Scroll Direction Without jQuery

Determining the direction of a scroll is crucial for enhancing user experiences. While jQuery simplifies this task, it's possible to achieve similar functionality using vanilla JavaScript.

Understanding the Issue

The provided code attempts to detect scroll direction by comparing the current scrollTop value to zero. However, this approach is flawed because it assumes the scroll is always starting from zero. In reality, the scroll position can be any value.

Detecting Scroll Direction Manually

The key to detecting scroll direction is storing the previous scrollTop value and comparing it to the current value. When the current value is greater than the previous value, the scroll is moving down. Conversely, if the current value is less than the previous value, the scroll is moving up.

Implementation

The following JavaScript code snippet demonstrates how to detect scroll direction:

<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>

Ensure Compatibility

This code should work in most modern browsers. However, for backward compatibility, it's recommended to use the window.pageYOffset or document.documentElement.scrollTop property to get the scroll position. Additionally, the lastScrollTop variable should be initialized to zero to handle negative scrolling or scrolling on mobile devices.

Conclusion

By utilizing the approach described in this article, you can effectively detect scroll direction using vanilla JavaScript. This technique is particularly useful for implementing features such as lazy loading, infinite scrolling, and smooth scrolling.

The above is the detailed content of How to Detect Scroll Direction in JavaScript Without jQuery?. For more information, please follow other related articles on the PHP Chinese website!