js如何监听窗口滚动事件滚动事件监听的3种实现方式-js教程-PHP中文网

js如何监听窗口滚动事件滚动事件监听的3种实现方式

冰火之心

发布： 2025-06-18 10:42:02

原创

416人浏览过

滚动事件监听有3种实现方式：第一，直接使用window.onscroll赋值函数，但会覆盖原有监听器；第二，使用window.addeventlistener添加多个监听器，灵活性更高；第三，结合节流或防抖优化性能，控制高频触发。此外，判断滚动方向需记录上次位置并与当前比较；优化方面包括减少dom操作、使用requestanimationframe及缓存计算结果；移动端需注意触屏滚动、惯性滚动及视口变化影响。掌握这些方法可提升页面响应效率与用户体验。

js如何监听窗口滚动事件滚动事件监听的3种实现方式

窗口滚动事件监听，简单来说，就是让你的JavaScript代码能够“听到”浏览器窗口正在滚动，然后做出相应的反应。这在网页开发中非常常见，比如实现滚动加载、回到顶部按钮、导航栏吸顶效果等等。

滚动事件监听的3种实现方式

直接使用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）...');
  });
});

登录后复制