jquery 判断scroll 向上滚动还是向下滚动

可以通过监听 `scroll` 事件，获取当前滚动条的位置和上一次滚动条的位置，从而判断是向上还是向下滚动。例如：

var lastScrollTop = 0;
$(window).on('scroll', function() {
  var scrollTop = $(this).scrollTop();
  if (scrollTop > lastScrollTop) {
    console.log('向下滚动');
  } else {
    console.log('向上滚动');
  }
  lastScrollTop = scrollTop;
});

在这个例子中，我们将上一次滚动条的位置保存在 `lastScrollTop` 变量中，每次滚动时与当前的滚动条位置进行比较，从而判断滚动方向。

相关问题

InfiniteScroll向上滚动加载

InfiniteScroll 向上滚动加载是一种流行的 Web 开发技术，它可以让用户在滚动网页时自动加载更多的内容，而无需手动点击“加载更多”按钮。它通常应用于需要展示大量数据的页面，如社交媒体的新闻流、电商网站的商品列表等。

实现 InfiniteScroll 向上滚动加载的关键是监听滚动事件，并在滚动到页面底部时触发数据加载的函数。具体实现方式可以使用 JavaScript 或 jQuery，以下是一个简单的 jQuery 实现示例：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       // 触发数据加载函数
   }
});

在实际开发中，还需要注意一些细节，比如避免重复加载数据、设置合理的数据加载阈值等。

jquery无卡顿向上滚动实现代码

以下是一个简单的 jQuery 实现向上滚动的代码示例：

HTML 代码：

<div id="scroll-container">
  <ul>
    <li>第一条消息</li>
    <li>第二条消息</li>
    <li>第三条消息</li>
    <li>第四条消息</li>
    <li>第五条消息</li>
  </ul>
</div>

CSS 代码：

#scroll-container {
  height: 200px;
  overflow: hidden;
}

#scroll-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#scroll-container ul li {
  margin: 10px 0;
}

JavaScript 代码：

$(document).ready(function() {
  var containerHeight = $('#scroll-container').height();
  var itemHeight = $('#scroll-container ul li').outerHeight();
  var items = $('#scroll-container ul li').clone();

  $('#scroll-container ul').append(items);

  setInterval(function() {
    var scrollTop = $('#scroll-container').scrollTop();

    if (scrollTop + containerHeight >= itemHeight * items.length) {
      $('#scroll-container').scrollTop(0);
    } else {
      $('#scroll-container').scrollTop(scrollTop + itemHeight);
    }
  }, 2000);
});

代码解释：

1. 首先获取容器 `#scroll-container` 的高度和列表项 `li` 的高度。
2. 复制列表项，添加到列表的末尾，以实现无限循环滚动。
3. 使用 `setInterval` 函数每隔 2 秒钟执行一次滚动操作。
4. 获取当前滚动位置 `scrollTop`，如果已经滚动到最后一条消息，将滚动位置重置为 0，否则将滚动位置加上一个列表项的高度，实现向上滚动的效果。