当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现窗口滚动事件监听，这3种方法你必须知道！

JS实现窗口滚动事件监听，这3种方法你必须知道！

2025-06-20 11:48:18 0浏览收藏

直接使用`window.onscroll`

这是最基础也最直接的方法。你可以直接将一个函数赋值给window.onscroll属性，这个函数会在每次窗口滚动时被调用。

window.onscroll = function() {
  // 在这里编写你的滚动处理逻辑
  console.log('窗口正在滚动...');
};

这种方式简单粗暴，但也有一些缺点。比如，如果你需要监听多个滚动事件，直接赋值的方式会覆盖之前的监听器。而且，这种方式的性能可能不是最优的，因为每次滚动都会触发函数调用。

使用`addEventListener`

addEventListener是更推荐的监听事件的方式。它可以让你添加多个监听器，而不会覆盖之前的监听器。

window.addEventListener('scroll', function() {
  // 在这里编写你的滚动处理逻辑
  console.log('窗口正在滚动（addEventListener）...');
});

addEventListener的优点是灵活性更高，可以添加多个监听器，也可以方便地移除监听器。

使用节流或防抖

滚动事件触发频率非常高，如果不加以控制，可能会导致性能问题。想象一下，你的滚动处理函数每次滚动都执行一次，如果这个函数内部有复杂的计算或者DOM操作，很容易造成页面卡顿。

这个时候，就需要使用节流（throttle）或防抖（debounce）技术。

节流（throttle）： 保证在一定时间内，函数最多执行一次。比如，设置一个时间间隔为200ms，那么即使滚动事件触发频率很高，函数最多每200ms执行一次。
防抖（debounce）： 在事件被触发后，延迟一段时间执行函数。如果在延迟时间内再次触发事件，则重新计时。只有当事件停止触发一段时间后，函数才会执行。

下面是一个使用lodash库实现节流的例子：

import throttle from 'lodash/throttle';

window.addEventListener('scroll', throttle(function() {
  // 在这里编写你的滚动处理逻辑
  console.log('窗口正在滚动（节流）...');
}, 200));

lodash是一个非常流行的JavaScript工具库，提供了很多实用的函数，包括节流和防抖。

如何判断滚动方向？

有时候，你可能需要根据滚动方向来执行不同的操作。比如，向上滚动时显示导航栏，向下滚动时隐藏导航栏。

要判断滚动方向，你需要记录上一次滚动的位置，然后与当前滚动位置进行比较。

let lastScrollTop = 0;

window.addEventListener('scroll', function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > lastScrollTop){
    // 向下滚动
    console.log('向下滚动');
  } else {
    // 向上滚动
    console.log('向上滚动');
  }
  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}, false);

这段代码中，lastScrollTop变量用来记录上一次滚动的位置。在每次滚动时，我们获取当前的滚动位置scrollTop，然后与lastScrollTop进行比较。如果scrollTop大于lastScrollTop，说明是向下滚动；否则，是向上滚动。

如何优化滚动事件监听的性能？

除了使用节流和防抖之外，还有一些其他的技巧可以用来优化滚动事件监听的性能。

减少DOM操作： 滚动处理函数内部应尽量避免频繁的DOM操作。DOM操作是非常耗费性能的，特别是修改元素的样式。如果需要修改样式，可以考虑使用CSS类名来批量修改。
使用requestAnimationFrame： requestAnimationFrame是一个浏览器API，可以让你的动画更加流畅。它可以让浏览器在下次重绘之前执行你的动画代码。使用requestAnimationFrame可以避免动画卡顿，提高用户体验。

window.addEventListener('scroll', function() {
  requestAnimationFrame(function() {
    // 在这里编写你的滚动处理逻辑
    console.log('窗口正在滚动（requestAnimationFrame）...');
  });
});