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

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JS监听窗口滚动事件？手把手教你3种实现方式》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

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

窗口滚动事件监听，简单来说，就是让你的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）...');
  });
});

• 避免不必要的计算： 滚动处理函数内部应尽量避免不必要的计算。如果某些计算结果可以缓存，可以考虑使用缓存来提高性能。

如何在移动端监听滚动事件？

在移动端监听滚动事件与在PC端监听滚动事件基本相同。但是，需要注意一些移动端的特殊性。

• 触屏滚动： 移动端主要通过触屏滚动，而不是鼠标滚轮。因此，滚动事件的触发频率可能会更高。建议使用节流或防抖来控制滚动事件的触发频率。
• 惯性滚动： 移动端通常有惯性滚动效果。这意味着，即使你停止滑动，页面仍然会继续滚动一段时间。在处理滚动事件时，需要考虑到惯性滚动的影响。
• 视口大小： 移动端的视口大小可能会发生变化，比如当用户旋转屏幕时。在处理滚动事件时，需要考虑到视口大小的变化。

总而言之，监听窗口滚动事件是前端开发中的一项基本技能。掌握不同的实现方式，并了解如何优化性能，可以让你写出更加高效、流畅的网页应用。

到这里，我们也就讲完了《JS实现窗口滚动事件监听，这3种方法你必须知道！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JS,滚动事件的知识点！