Jquery 检查滚动方向

在 web 开发中，我们经常需要监听用户在页面上的滚动行为，以实现各种效果。而有些效果需要在用户向上滚动时执行，有些则需要在用户向下滚动时执行。这时，我们就需要检查用户的滚动方向了。

使用 jQuery，检查滚动方向也非常简单。我们可以监听 scroll 事件，并通过比较当前滚动位置和上一次滚动位置的差值来判断滚动方向。

以下是一个示例代码：

var lastScrollTop = 0;

$(window).on('scroll', function() {
  var scrollTop = $(this).scrollTop();

  if (scrollTop > lastScrollTop) {
    console.log('向下滚动');
  } else {
    console.log('向上滚动');
  }

  lastScrollTop = scrollTop;
});

上面的代码中，我们使用了 lastScrollTop 来保存上一次的滚动位置，在每次触发 scroll 事件时，都与当前滚动位置进行比较。如果当前滚动位置大于上一次滚动位置，则说明用户正在向下滚动，反之则说明用户正在向上滚动。

此外，我们还可以为滚动方向设置一个阈值，以过滤掉一些小幅度的滚动事件，只处理大幅度的滚动。例如：

var lastScrollTop = 0;
var threshold = 50;

$(window).on('scroll', function() {
  var scrollTop = $(this).scrollTop();
  var diff = Math.abs(scrollTop - lastScrollTop);

  if (diff > threshold) {
    if (scrollTop > lastScrollTop) {
      console.log('向下滚动');
    } else {
      console.log('向上滚动');
    }

    lastScrollTop = scrollTop;
  }
});

在上面的代码中，我们设置了一个阈值 threshold，表示只有当本次滚动与上次滚动的距离大于该值时，才认为用户进行了一次有效的滚动操作。这样可以避免一些用户不经意间的微小滚动干扰我们的滚动方向判断。