JS监听滚动事件的几种方法

想要掌握JavaScript滚动事件监听？本文为你详细解读！通过`addEventListener`，你可以轻松监听`window`或特定元素的滚动。想要判断滚动方向？只需记录上次滚动位置，与当前位置对比即可。更重要的是，本文还提供了性能优化技巧，包括节流、防抖以及`requestAnimationFrame`，避免页面卡顿。此外，还介绍了如何使用`scrollTo`等方法实现滚动到指定位置，以及如何检测元素是否在可视区域内，实现懒加载等功能。针对移动端，特别强调了惯性滚动问题及被动事件监听器的应用，助你编写更流畅的滚动处理代码，提升用户体验。

JavaScript通过addEventListener监听滚动事件，可绑定到window或特定元素。1. 判断滚动方向需记录上次滚动位置，比较当前与上次的scrollTop值，若当前更大则向下滚动，否则向上滚动。2. 性能优化常用节流（每间隔固定时间执行一次）、防抖（停止触发后延迟执行）和requestAnimationFrame（与浏览器重绘同步）来减少事件处理频率。3. 实现滚动到指定位置可用scrollTo、scrollBy或scrollIntoView方法，后者支持平滑滚动。4. 检测元素是否在可视区域可通过getBoundingClientRect获取元素位置，并与视口尺寸比较判断。5. 移动端滚动需注意惯性滚动持续触发问题，建议使用被动事件监听器（passive: true）提升性能，并避免在滚动事件中执行耗时操作以防止卡顿。

JavaScript 监听滚动事件，核心就是利用 addEventListener 给 window 或特定的元素绑定 scroll 事件。 这样，当页面或元素发生滚动时，你就能执行自定义的 JavaScript 代码了。

// 监听 window 的滚动事件
window.addEventListener('scroll', function() {
  // 在这里编写你的滚动处理逻辑
  console.log('页面正在滚动...');
});

// 监听特定元素的滚动事件
const element = document.getElementById('yourElement');
element.addEventListener('scroll', function() {
  // 在这里编写你的滚动处理逻辑
  console.log('元素正在滚动...');
});

如何判断滚动方向？

判断滚动方向是个挺常见的需求。你可以通过记录上一次的滚动位置，然后和当前滚动位置进行比较来实现。

let lastScrollTop = 0;
window.addEventListener('scroll', function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 兼容性写法
  if (scrollTop > lastScrollTop){
    // 向下滚动
    console.log('向下滚动');
  } else {
    // 向上滚动
    console.log('向上滚动');
  }
  lastScrollTop = scrollTop;
});

这里用了 pageYOffset 和 documentElement.scrollTop，是为了兼容不同的浏览器。 pageYOffset 在现代浏览器里更常用，而 documentElement.scrollTop 则是一些老版本浏览器的选择。

滚动事件的性能优化有哪些技巧？

滚动事件触发频率很高，如果不加优化，很容易导致页面卡顿。 所以，性能优化至关重要。

1. 节流 (Throttling)： 限制事件处理函数的执行频率。比如，每 250ms 执行一次。

   

   function throttle(func, delay) {
     let timeout;
     return function() {
       let context = this, args = arguments;
       if (!timeout) {
         timeout = setTimeout(function(){
           func.apply(context, args);
           timeout = null;
         }, delay);
       }
     }
   }
   
   window.addEventListener('scroll', throttle(function() {
     console.log('节流后的滚动事件');
   }, 250));

2. 防抖 (Debouncing)： 在事件停止触发一段时间后才执行处理函数。 比如，在停止滚动 250ms 后执行。

   function debounce(func, delay) {
     let timeout;
     return function() {
       let context = this, args = arguments;
       clearTimeout(timeout);
       timeout = setTimeout(function() {
         func.apply(context, args);
       }, delay);
     };
   }
   
   window.addEventListener('scroll', debounce(function() {
     console.log('防抖后的滚动事件');
   }, 250));

   节流和防抖，选哪个取决于你的需求。 节流保证在一定时间内至少执行一次，而防抖保证只有在停止触发后才执行。

3. 使用 requestAnimationFrame： requestAnimationFrame 会在浏览器下一次重绘之前执行你的回调函数。 这样可以确保你的动画或更新与浏览器的刷新频率同步，从而提高性能。

   let ticking = false;
   window.addEventListener('scroll', function() {
     if (!ticking) {
       requestAnimationFrame(function() {
         // 执行你的滚动处理逻辑
         console.log('使用 requestAnimationFrame 的滚动事件');
         ticking = false;
       });
       ticking = true;
     }
   });

   ticking 变量用来确保在每个动画帧中只执行一次滚动处理逻辑。

如何实现滚动到指定位置？

有时候，你需要通过 JavaScript 代码滚动到页面的特定位置。 可以使用 scrollTo 或 scrollBy 方法。

// 滚动到页面的顶部
window.scrollTo(0, 0);

// 滚动到页面底部
window.scrollTo(0, document.documentElement.scrollHeight);

// 平滑滚动到指定元素
const element = document.getElementById('targetElement');
element.scrollIntoView({ behavior: 'smooth' });

// 滚动到当前位置下方 200 像素
window.scrollBy(0, 200);

scrollIntoView 方法可以平滑滚动到指定的元素，让用户体验更好。

如何检测元素是否在可视区域内？

检测元素是否在可视区域内，可以用来实现“懒加载”或者“无限滚动”等功能。

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

window.addEventListener('scroll', function() {
  const element = document.getElementById('yourElement');
  if (isElementInViewport(element)) {
    console.log('元素在可视区域内');
  } else {
    console.log('元素不在可视区域内');
  }
});

getBoundingClientRect 方法返回元素的大小及其相对于视口的位置。 然后，你可以根据这些信息来判断元素是否在可视区域内。

滚动事件在移动端有什么不同？

移动端的滚动事件和桌面端基本相同，但触摸事件会影响滚动行为。 例如，在触摸设备上，惯性滚动可能会导致滚动事件持续触发，即使用户已经停止滑动。

为了优化移动端的滚动体验，可以考虑以下几点：

• 使用被动事件监听器 (Passive Event Listeners)： 对于一些不会阻止页面滚动的事件，可以使用被动事件监听器来提高性能。

  window.addEventListener('scroll', function() {
    // 滚动处理逻辑
  }, { passive: true });

  passive: true 告诉浏览器，你的滚动事件处理函数不会调用 preventDefault() 方法来阻止滚动。 这可以让浏览器更流畅地处理滚动事件。

• 避免在滚动事件中执行耗时操作： 尽量避免在滚动事件处理函数中执行复杂的计算或 DOM 操作。 这些操作可能会导致页面卡顿。

总的来说，JavaScript 监听滚动事件是一个很常用的功能，但需要注意性能优化。 合理使用节流、防抖、requestAnimationFrame 和被动事件监听器，可以让你编写出更流畅、更高效的滚动处理代码。

今天关于《JS监听滚动事件的几种方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！