网站导航
> 技术文档 > js使用IntersectionObserver实现目标元素可见度的交互_useintersectionobserver

js使用IntersectionObserver实现目标元素可见度的交互_useintersectionobserver

网友: 技术文档 2025-09-02 19:04:26

文章目录

  • 1、前言
  • 2、代码实现
  • 3、使用场景
  • 4、兼容性
  • 5、成熟的Hooks推荐

1、前言

IntersectionObserver 是浏览器原生提供的一个Api。可以\"观察\"我们的元素是否可见，原理是判断目标元素与可见区域的交叉比例，所以也被称为\"交叉观察器\"。本文通过一个Demo代码，讲解如何使用IntersectionObserver，来实现根据目标元素可见度的交互效果。并附有兼容性，使用场景，完整代码实现，以及成熟的Hooks推荐。

2、代码实现

下面代码（React 18）是使用 IntersectionObserver 来监听列表元素的可见度，当卡片元素完全进入浏览器视口时，会标记该元素为活动状态；当元素离开视口时，取消活动状态。

  • 代码
import { useEffect, useRef, useState } from \'react\'import moduleStyle from \'./index.module.scss\'/** * @description Demo */export default function DemoPage() {// #region 数据const [dataList, setDataList] = useState([])const observer = useRef(null)// #endregion// #region 逻辑/** * @description 初始化模拟请求数据 */useEffect(() => {setTimeout(() => {const list = [...Array(10)].map((_, index) => {return { value: (index + 1).toString(), isActive: false }})setDataList(list)}, 1000)}, [])/** * @description 监听 */useEffect(() => {observer.current = new IntersectionObserver((entries) => {entries.forEach((entry, index) => {if (entry.isIntersecting) {const tempList = [...dataList]tempList[index].isActive = truesetDataList(tempList)} else {const tempList = [...dataList]tempList[index].isActive = falsesetDataList(tempList)}})},{root: null,threshold: 1.0 // 当可见度达到100%时触发})const cardElements = document.querySelectorAll(\'.card\')cardElements.forEach((el) => observer.current.observe(el))return () => {if (observer.current) {observer.current.disconnect()}}}, [dataList])// #endregion// #region 视图return (
{dataList.map((item) => (
{item.value}
))}
)// #endregion}

  • dataList：是一个状态变量，用于存储模拟请求得到的数据列表。每个数据项包含 value 和 isActive 两个属性，value 是元素的标识，isActive 表示元素是否处于活动状态。

  • observer：是一个 useRef 创建的引用，用于存储 IntersectionObserver 实例。

  • 第一个 useEffect 钩子：用于模拟异步请求数据。在组件挂载后，通过 setTimeout 模拟接口 1 秒的延迟，生成包含 10 个元素的列表，并更新 dataList 状态。

  • 第二个 useEffect 钩子用于初始化 IntersectionObserver。当 dataList 发生变化时，创建一个新的 IntersectionObserver 实例，该实例会监听所有具有 card 类名的元素。当元素完全进入视口（可见度达到 100%）时，将其 isActive 属性设置为 true；当元素离开视口时，将 isActive 属性设置为 false。同时，在组件卸载时，断开 IntersectionObserver 的连接，避免内存泄漏。

  • 样式

.demo-wrapper {width: 100%;height: 100%;padding: 16px;.list-wrapper {display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;gap: 16px;width: 100%;height: 100%;overflow-y: auto;.item-wrapper {display: flex;align-items: center;justify-content: center;width: calc(50% - 8px);height: 320px;color: #ffffff;font-size: 24px;background-color: #cccccc;transition: ease 0.3s;border-radius: 8px;overflow: hidden;}.active {background-color: #6212d6 !important;}}}

3、使用场景

  • 懒加载图片：在图片较多的页面中，可以使用 IntersectionObserver 监听图片元素的可见性。当图片元素进入视口时，再加载图片，从而减少初始加载时的资源消耗，提高页面性能。
  • 无限滚动加载：在社交网站、新闻列表等场景中，当用户滚动页面接近底部时，通过监听底部元素的可见性，触发加载更多数据的操作，实现无限滚动加载的效果。
  • 动画触发：当某个元素进入视口时，触发动画效果，增强页面的交互性和视觉效果。例如，元素淡入、滑动等动画。

4、兼容性

环境 版本 支持情况 Chrome 51+ 支持 Firefox 55+ 支持 Edge 79+（新版本基于Chromium） 支持 Safari 12.1+ 支持 iOS Safari 13+ 支持 Opera 38+ 支持 Safari on macOS 12.1+ 支持 Android Browser 通常跟随WebView版本 需要检查具体设备 Chrome for Android 51+ 支持

如果不支持，可以使用 IntersectionObserver polyfill 来实现兼容性支持。

5、成熟的Hooks推荐

  • Vue

    • useElementVisibility

  • React

    • useInViewport

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

  • flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
  • flutter-制作可缩放底部弹出抽屉评论区效果
  • flutter-实现Tabs吸顶的PageView效果
  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细！Vue的九种通信方式
  • 超详细！Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金
网络标签：

相关问题