当前位置：首页 > jquery

jquery滚动事件

2026-04-08 06:01:06jquery

jQuery 滚动事件基础

使用 jQuery 监听滚动事件主要通过 scroll() 方法实现。该方法可绑定滚动事件处理器，适用于窗口或可滚动元素（如 div）。

基本语法：

$(selector).scroll(function() {
  // 滚动时执行的代码
});

示例：监听窗口滚动

$(window).scroll(function() {
  console.log("窗口正在滚动");
});

获取滚动位置

通过 scrollTop() 方法获取垂直滚动位置，scrollLeft() 获取水平滚动位置。

获取窗口滚动位置：

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  console.log("当前垂直滚动位置: " + scrollTop);
});

获取元素内部滚动位置：

$("#scrollableDiv").scroll(function() {
  var scrollLeft = $(this).scrollLeft();
  console.log("水平滚动位置: " + scrollLeft);
});

性能优化：防抖（Debounce）

高频触发滚动事件可能影响性能，可通过防抖技术限制执行频率。

实现防抖：

jquery滚动事件

var timer;
$(window).scroll(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    console.log("滚动停止后执行");
  }, 200); // 延迟200毫秒
});

滚动到指定位置

使用 animate() 方法实现平滑滚动效果。

滚动到页面顶部：

$("html, body").animate({ scrollTop: 0 }, 500); // 500毫秒内完成

滚动到特定元素：

$("html, body").animate({
  scrollTop: $("#targetElement").offset().top
}, 800);

滚动方向判断

通过比较当前与上一次的滚动位置，可判断滚动方向。

示例代码：

jquery滚动事件

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

滚动事件解除绑定

使用 off() 方法移除滚动事件监听。

移除所有滚动事件：

$(window).off("scroll");

移除特定函数：

function handleScroll() {
  console.log("滚动处理");
}
$(window).scroll(handleScroll);
// 后续移除
$(window).off("scroll", handleScroll);

实际应用示例

导航栏显隐控制：

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $("#navbar").addClass("hidden");
  } else {
    $("#navbar").removeClass("hidden");
  }
});

无限滚动加载：

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
    loadMoreContent(); // 自定义加载函数
  }
});