jQuery 获取滚动条

原创

mob649e816704bc 2023-08-12 18:58:35 ©著作权

文章标签 jQuery javascript 回调函数 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e816704bc的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 获取滚动条

在进行网页开发时，我们经常需要获取用户滚动页面的行为，以实现一些特定的交互效果或者触发一些事件。jQuery提供了一种简单的方式来获取滚动条的位置和滚动的方向。

获取滚动条的位置

我们可以使用scrollTop()方法来获取当前滚动条相对于顶部的距离。这个方法返回一个整数值，表示滚动条的垂直偏移量。

let scrollTop = $(window).scrollTop();
console.log(scrollTop);

上述代码会打印出当前滚动条距离顶部的距离。如果页面没有出现滚动条，那么返回的值将为0。

获取滚动条的方向

要获取滚动条的方向，我们需要记录上一次滚动条的位置，并与当前位置进行比较。

let lastScrollTop = 0;
$(window).scroll(function () {
  let currentScrollTop = $(this).scrollTop();
  if (currentScrollTop > lastScrollTop) {
    console.log("向下滚动");
  } else {
    console.log("向上滚动");
  }
  lastScrollTop = currentScrollTop;
});

在上述代码中，我们使用了scroll()方法来监听滚动事件。当滚动条滚动时，会调用传入的回调函数。在回调函数中，我们获取当前的滚动条位置，并与上一次的位置进行比较。如果当前位置比上一次的位置大，说明是向下滚动；如果当前位置比上一次的位置小，说明是向上滚动。

滚动条事件

除了获取滚动条的位置和方向外，我们还可以利用滚动条的位置来触发一些特定的事件。比如，当用户滚动到页面底部时，可以自动加载更多的内容。

$(window).scroll(function () {
  let scrollTop = $(this).scrollTop();
  let windowHeight = $(this).height();
  let documentHeight = $(document).height();
  if (scrollTop + windowHeight >= documentHeight) {
    console.log("到达页面底部");
    // 触发加载更多的操作
  }
});

在上述代码中，我们使用了height()方法来获取窗口的高度、文档的高度以及滚动条距离顶部的距离。当滚动条距离顶部的距离加上窗口的高度大于或等于文档的高度时，说明滚动条已经滚动到了页面底部。