监听事件滚动API

youxinm24

于 2024-09-29 23:00:02 发布

阅读量315

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/youxinm24/article/details/142645516

版权

`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('页面滚动了');
}

常见用途

无限滚动：当用户滚动到底部时，加载更多内容（如社交媒体中的无限滚动加载）。
滚动位置检测：用于检测用户滚动到页面的哪个部分，通常用于导航高亮、懒加载图片等。
动画触发：根据用户滚动的距离，触发页面上的滚动动画效果。

缺点

性能问题：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();

常见用途

懒加载图片：当图片元素进入视口时才加载资源，减少初始页面加载时的带宽消耗。
触发动画：当某个元素进入可视区域时，触发动画效果。
广告曝光统计：用于监控广告元素是否出现在用户的视口中，以计算广告曝光率。
无限滚动：检测滚动容器中的最后一个项目是否可见，如果可见就加载更多内容。

优点

性能优越：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）。	`null`	`root: 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/A	`entry.time`
`target`	被观察的目标元素（DOM 节点）。	N/A	`entry.target`
`rootBounds`	根元素的矩形区域，返回 `getBoundingClientRect()` 的结果。	`null`（视口为 `root` 时）	`entry.rootBounds`
`boundingClientRect`	目标元素的矩形区域。	N/A	`entry.boundingClientRect`
`intersectionRect`	目标元素与根元素的交叉区域。	N/A	`entry.intersectionRect`
`intersectionRatio`	目标元素可见的比例，0 表示不可见，1 表示完全可见。	`0`	`entry.intersectionRatio`
`observe()`	开始观察某个目标元素。	N/A	`observer.observe(element)`
`unobserve()`	停止观察某个目标元素。	N/A	`observer.unobserve(element)`
`disconnect()`	停止观察所有目标元素，断开 `IntersectionObserver` 实例。	N/A	`observer.disconnect()`
`takeRecords()`	返回未处理的 `IntersectionObserverEntry` 对象数组。	N/A	`observer.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 对象数组。

对比总结

特性	`onscroll`	`IntersectionObserver`
触发方式	每次滚动都会触发	只在目标元素进入/离开视口时触发
性能	性能可能较差，需使用节流防抖	性能优越，异步执行，不频繁触发
手动计算	需要手动计算滚动位置	自动检测元素是否进入视口
使用场景	无限滚动、滚动位置计算等	懒加载图片、动画触发、广告曝光等
浏览器兼容性	广泛支持	现代浏览器支持，旧版需 polyfill
复杂度	简单，适合简单的滚动处理	配置多，适合较复杂的场景
检测能力	只能检测滚动事件	可以检测元素的可见性及交集比例

何时使用 `onscroll` 和 `IntersectionObserver`

onscroll：适合需要精确监控滚动位置的场景，例如需要持续追踪页面滚动高度，或者根据滚动距离来做滚动动画、固定导航栏等效果。
IntersectionObserver：适合懒加载、滚动触发动画、广告曝光监控等场景，尤其是需要检测元素何时进入或离开视口时，IntersectionObserver 的性能和易用性更优。