监听滚动事件API

YOUXIN
318 阅读9分钟

onscroll 事件

简介

onscroll 是一个监听滚动事件的事件处理器。当页面或元素的滚动条发生滚动时，onscroll 事件就会触发。它通常用于侦听用户滚动页面的行为，并根据滚动的位置来执行某些操作。

用法

可以直接在 DOM 元素上使用 onscroll 属性，或者通过 JavaScript 为元素或 window 绑定 scroll 事件。

 <!-- HTML 直接使用 onscroll -->
 <div onscroll="handleScroll()" style="overflow: auto; height: 200px;">
   <!-- 滚动的内容 -->
 </div>

 // JavaScript 方式
 window.addEventListener('scroll', handleScroll);
 ​
 function handleScroll() {
   console.log('页面滚动了');
 }
常见用途
  1. 无限滚动：当用户滚动到底部时，加载更多内容（如社交媒体中的无限滚动加载）。
  2. 滚动位置检测：用于检测用户滚动到页面的哪个部分，通常用于导航高亮、懒加载图片等。
  3. 动画触发：根据用户滚动的距离，触发页面上的滚动动画效果。
缺点
  • 性能问题：onscroll 事件会在用户每次滚动时频繁触发，滚动速度快时可能导致事件触发过于频繁，进而影响性能，尤其在需要复杂计算或 DOM 操作的场景中。为了改善性能，可以结合节流（throttle） 或防抖（debounce） 策略减少事件触发频率。
优点
  • 简单直接：onscroll 是最直接的滚动监听方法，适用于简单的滚动处理需求。
  • 跨浏览器支持好：几乎所有现代浏览器都支持 onscroll，不需要考虑兼容性问题。

常见的滚动属性

onscroll 事件会在页面或元素发生滚动时触发，监听滚动事件后，开发者通常需要访问与滚动相关的属性来获取当前的滚动状态。通常，你可以使用 window 或某个元素的 scroll 事件来处理滚动相关的功能，以下是与 onscroll 相关的一些常见属性。

判断页面是否滚动到底部的示例

我们可以将一些属性结合使用，例如判断页面是否滚动到底部时，通常会结合 scrollTop、clientHeight 和 scrollHeight。

 window.addEventListener('scroll', () => {
   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
   const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
 ​
   if (scrollTop + clientHeight >= scrollHeight) {
     console.log('已经滚动到底部了');
   }
 });
  • scrollTop 和 scrollLeft：表示滚动距离，分别用于垂直和水平滚动。
  • scrollHeight 和 scrollWidth：表示元素或页面的总内容高度和宽度（包括滚动不可见的部分）。
  • clientHeight 和 clientWidth：表示可见区域的高度和宽度。
  • offsetHeight 和 offsetWidth：表示元素的高度和宽度，包含 padding 和 border。

IntersectionObserver API

简介

IntersectionObserver 是现代浏览器提供的一个用于观察目标元素与其祖先元素或视口（viewport）交集的 API。它可以检测元素是否在视口中可见（即，是否进入或离开视口），以及可见部分的大小比例等。这在懒加载图片、滚动触发动画、广告曝光监控等场景中非常实用。

由于可见visible的本质是，目标元素与视口产生一个交叉区，所以这个API叫做交叉观察器，兼容性https://caniuse.com/?search=IntersectionObserver。

用法

与 onscroll 不同，IntersectionObserver 是一个 API，不直接与滚动事件绑定，而是通过异步回调的方式，监听目标元素何时进入或离开可视区域。

 // 创建 IntersectionObserver 实例
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       console.log('元素进入视口');
     } else {
       console.log('元素离开视口');
     }
   });
 });
 ​
 // 观察目标元素
 const target = document.querySelector('#target');
 observer.observe(target);
 ​
 ​
 // 开始观察
 observer.observe(document.getElementById("example"));
 // 停止观察
 observer.unobserve(element);
 // 关闭观察器
 observer.disconnect();
 ​
常见用途
  1. 懒加载图片：当图片元素进入视口时才加载资源，减少初始页面加载时的带宽消耗。
  2. 触发动画：当某个元素进入可视区域时，触发动画效果。
  3. 广告曝光统计：用于监控广告元素是否出现在用户的视口中，以计算广告曝光率。
  4. 无限滚动：检测滚动容器中的最后一个项目是否可见，如果可见就加载更多内容。
优点
  • 性能优越：IntersectionObserver 的性能比 onscroll 更好，因为它是异步执行的，不会在每次滚动时频繁触发。
  • 减少手动计算：相比 onscroll 需要手动计算元素是否在视口中，IntersectionObserver 可以自动检测，简化了开发工作。
  • 支持可见比例检测：可以检测元素与视口的交集比例（如部分可见），适合精确控制元素的显示与隐藏。
 const options = {
   root: null, // 默认为视口
   rootMargin: '0px', // 用于增加触发的外边距
   threshold: 0.5 // 50% 可见时触发
 };
 ​
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       console.log('元素至少有50%可见');
     }
   });
 }, options);
缺点
  • 兼容性问题：IntersectionObserver 是一种相对较新的 API，虽然现代浏览器都已支持，但对于较旧的浏览器（如 IE）需要使用 polyfill 进行兼容。
代码
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>IntersectionObserver 属性示例</title>
   <style>
     .image-container {
       height: 500px;
       background-color: #f0f0f0;
       margin-bottom: 20px;
     }
 ​
     img {
       max-width: 100%;
       display: block;
     }
   </style>
 </head>
 <body>
 ​
   <!-- 两个需要懒加载的图片元素 -->
   <div class="image-container">
     <img data-src="https://via.placeholder.com/600x400" alt="Lazy Load Image" class="lazy-image">
   </div>
   <div class="image-container">
     <img data-src="https://via.placeholder.com/600x400" alt="Lazy Load Image" class="lazy-image">
   </div>
 ​
   <script>
     // 定义 IntersectionObserver 的 options 配置对象
     let observerOptions = {
       root: null,  // 根元素，默认是视口 (viewport)，可以是任何目标元素的祖先节点
       rootMargin: "0px 0px 100px 0px",  // 根元素的外边距，提前100px触发懒加载  类似 CSS margin 
       threshold: [0, 0.25, 0.5, 0.75, 1]  // 当目标元素可见性到达这些比例时，触发回调函数 默认值为 [0]
     };
 ​
     // 定义 IntersectionObserver 的回调函数
     let observer = new IntersectionObserver((entries, observer) => {
       entries.forEach(entry => {
         // 当目标元素的交叉比例达到设定的阈值时触发
         if (entry.isIntersecting) {
           // `target` 属性返回当前被观察的元素
           let img = entry.target;
 ​
           // 将 data-src 替换为 src 来实际加载图片
           img.src = img.dataset.src;
 ​
           // 停止观察此图片，因为图片已经加载完了
           observer.unobserve(img);
         }
 ​
         // 相关属性的输出示例
         console.log('交叉比例 (intersectionRatio):', entry.intersectionRatio);  // 目标元素的可见比例
         console.log('边界盒 (boundingClientRect):', entry.boundingClientRect);  // 目标元素的矩形区域
         console.log('根的矩形区域 (rootBounds):', entry.rootBounds);  // 根元素的矩形区域（如果是视口则为null）
         console.log('交叉的矩形区域 (intersectionRect):', entry.intersectionRect);  // 交叉区域
         console.log('触发时间戳 (time):', entry.time);  // 触发的时间戳
       });
     }, observerOptions);
 ​
     // 开始观察所有懒加载图片
     document.querySelectorAll('.lazy-image').forEach(img => {
       observer.observe(img);
     });
 ​
   </script>
 </body>
 </html>
 ​
IntersectionObserver 的属性和方法
属性/方法定义默认值用法
root根元素，指定观察的容器，如果为 null，则为视口（viewport）。nullroot: document.querySelector('#container')
rootMargin设置根元素的外边距，影响根元素边界的检测范围，类似 CSS 的 margin。"0px 0px 0px 0px"rootMargin: "10px 0px 100px 0px"
threshold目标元素的可见性阈值，数组中每个值为可见比例，从 0 到 1。[0]threshold: [0, 0.25, 0.5, 0.75, 1]
time可见性变化的时间戳，单位为毫秒。N/Aentry.time
target被观察的目标元素（DOM 节点）。N/Aentry.target
rootBounds根元素的矩形区域，返回 getBoundingClientRect() 的结果。null（视口为 root 时）entry.rootBounds
boundingClientRect目标元素的矩形区域。N/Aentry.boundingClientRect
intersectionRect目标元素与根元素的交叉区域。N/Aentry.intersectionRect
intersectionRatio目标元素可见的比例，0 表示不可见，1 表示完全可见。0entry.intersectionRatio
observe()开始观察某个目标元素。N/Aobserver.observe(element)
unobserve()停止观察某个目标元素。N/Aobserver.unobserve(element)
disconnect()停止观察所有目标元素，断开 IntersectionObserver 实例。N/Aobserver.disconnect()
takeRecords()返回未处理的 IntersectionObserverEntry 对象数组。N/Aobserver.takeRecords()

属性解释：

  • root：用于指定目标元素相对于哪个容器进行观察。通常情况下，默认是相对于视口。如果目标元素在某个滚动容器中，root 可以设定为这个滚动容器。
  • rootMargin：类似于 CSS 中的 margin 属性，可以设定四个方向的外边距。通过增加 rootMargin，可以让观察提前进行，比如当元素距离视口 100px 时就触发回调。
  • threshold：定义目标元素可见的比例。当元素的可见部分与其整体部分的比例达到 threshold 中设定的值时，就会触发回调函数。可以设定多个阈值。
  • time：在回调函数中，每次触发时都会带有一个 time 值，表示可见性变化发生的时间点，单位是毫秒。
  • target：目标元素是被观察的 DOM 节点，回调中可以通过 entry.target 访问。
  • rootBounds：根元素的矩形区域，如果根元素是视口，rootBounds 将返回 null，否则返回该元素的边界矩形。
  • boundingClientRect：返回目标元素的矩形区域，表示该元素在页面中的位置和大小。
  • intersectionRect：目标元素和根元素的交叉区域。如果目标元素和根元素没有交集，则返回一个空的矩形。
  • intersectionRatio：这是一个 0 到 1 之间的值，表示目标元素可见的比例，1 表示完全可见，0 表示完全不可见。

方法解释：

  • observe() ：开始观察某个目标元素，每次该目标元素的可见性发生变化时，都会触发回调函数。
  • unobserve() ：停止观察某个特定的目标元素，回调函数不会再因为该元素的可见性变化而触发。
  • disconnect() ：停止所有观察目标，断开 IntersectionObserver 实例。
  • takeRecords() ：返回所有未处理的 IntersectionObserverEntry 对象数组。
对比总结
特性onscrollIntersectionObserver
触发方式每次滚动都会触发只在目标元素进入/离开视口时触发
性能性能可能较差，需使用节流防抖性能优越，异步执行，不频繁触发
手动计算需要手动计算滚动位置自动检测元素是否进入视口
使用场景无限滚动、滚动位置计算等懒加载图片、动画触发、广告曝光等
浏览器兼容性广泛支持现代浏览器支持，旧版需 polyfill
复杂度简单，适合简单的滚动处理配置多，适合较复杂的场景
检测能力只能检测滚动事件可以检测元素的可见性及交集比例
何时使用 onscroll 和 IntersectionObserver
  • onscroll：适合需要精确监控滚动位置的场景，例如需要持续追踪页面滚动高度，或者根据滚动距离来做滚动动画、固定导航栏等效果。
  • IntersectionObserver：适合懒加载、滚动触发动画、广告曝光监控等场景，尤其是需要检测元素何时进入或离开视口时，IntersectionObserver 的性能和易用性更优。

总结

  • onscroll 更适合简单的滚动事件监听，但需要谨慎处理性能问题，特别是在复杂场景中要注意使用节流或防抖。
  • IntersectionObserver 是更现代的 API，适合检测元素可见性、懒加载等高级功能，具备更好的性能表现，并且避免了 onscroll 频繁触发带来的性能开销。

选择使用哪个工具取决于具体的场景和需求。如果你需要精确跟踪滚动位置，onscroll 可能更合适，而如果你想要检测某个元素是否进入视口，IntersectionObserver 会是更好的选择。

avatar
文章
阅读
粉丝