IntersectionObserver与无限滚动加载

news2025/4/6 12:36:08

学习链接

IntersectionObserver MDN Api

IntersectionObserver API详解

Intersection observer 的概念和用法

过去,要检测一个元素是否可见或者两个元素是否相交并不容易,比如实现图片懒加载、内容无限滚动等功能时,都需要通过​getBoundingClientRect()​写大量的逻辑计算或者依靠scroll事件监听等性能很差方式来实现。

现在,依靠IntersectionObserver我们能非常便捷且高效的实现上述功能。

Intersection Observer API 会注册一个回调函数,每当被监视的元素进入或者退出另外一个元素时 (或者 viewport ),或者两个元素的相交部分大小发生变化时,该回调方法会被触发执行。

注意 Intersection Observer API 无法提供重叠的像素个数或者具体哪个像素重叠,他的更常见的使用方式是——当两个元素相交比例在 N% 左右时,触发回调,以执行某些逻辑。

Intersection Observer API 允许你配置一个回调函数,当以下情况发生时会被调用

  • 每当目标 (target) 元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根 (root)。
  • Observer 第一次监听目标元素的时候

通常,您需要关注文档最接近的可滚动祖先元素的交集更改,如果元素不是可滚动元素的后代,则默认为设备视窗。如果要观察相对于根 (root) 元素的交集,请指定根 (root) 元素为null。

无论您是使用视口还是其他元素作为根,API 都以相同的方式工作,只要目标元素的可见性发生变化,就会执行您提供的回调函数,以便它与所需的交叉点交叉。

目标 (target) 元素与根 (root) 元素之间的交叉度是交叉比 (intersection ratio)。这是目标 (target) 元素相对于根 (root) 的交集百分比的表示,它的取值在 0.0 和 1.0 之间。

Api

// 创建实例
const observer = new IntersectionObserver(callback, option);
 
// 开始观察element1
observer.observe(element1);
 
// 开始观察element2
observer.observe(element2);
 
// 停止观察
observer.unobserve(element);
 
// 关闭观察器
observer.disconnect();

IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:callback是可见性变化时的回调函数,option是配置对象(该参数可选)。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点,如果需要观察多个DOM节点可以多次添加observe方法。

callback 参数

当以下情况发生时会调用回调函数:
在这里插入图片描述
callback函数的参数(entries)是一个数组,每个成员都是一个IntersectionObserverEntry对象。举例来说,如果同时有两个被观察的对象的可见性发生变化,entries数组就会有两个成员。

每个IntersectionObserverEntry对象属性含义如下:

  • boundingClientRect:目标元素的矩形区域的信息
  • intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
  • intersectionRect:目标元素与视口(或根元素)的交叉区域的信息
  • rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null
  • isIntersecting:目标元素是否与视口(或根元素)交叉
  • isVisible:并未查阅到相关资料,且经过测试其并不会发生变化
  • target:被观察的目标元素,是一个 DOM 节点对象
  • time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒

Option 对象

IntersectionObserver构造函数的第二个参数是一个配置对象。它可以设置以下属性。

  • root:指定根元素,用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null,则默认为浏览器视窗。
  • rootMargin:根元素的外边距,类似于 CSS 中的margin属性。
  • threshold:目标元素与根元素的交叉比例,可以是单一的 number 也可以是 number 数组,比如,[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时,会触发回调函数。

注意点

IntersectionObserver API 是异步的,不随着目标元素的滚动同步触发。

注册的回调函数将会在主线程中被执行,所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行,建议使用 Window.requestIdleCallback() 方法。

无限滚动案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IntersectionObserver</title>
</head>
<body style="font-size: 24px;text-align: center">
<div id="container"></div>
<div id="loadMore">加载中...</div>
</body>
<script>
  const container = document.querySelector('#container');
  const loadMore = document.querySelector('#loadMore');
  let index = 0;
 
  const loadItems = (count) => {
    [...Array(count).keys()].forEach((key) => {
      const p = document.createElement('P');
      p.innerHTML = `${key + index}`;
      container.appendChild(p)
    })
    index += count;
  }
 
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(({ isIntersecting }) => {
      if (isIntersecting) {
        loadItems(20);
      }
    })
  });
 
  observer.observe(loadMore)
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/434152.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java语法理论和面经杂疑篇《十一. JDK8新特性》

目录 1. Java版本迭代概述 1.1 发布特点&#xff08;小步快跑&#xff0c;快速迭代&#xff09; 1.2 名词解释 1.3 各版本支持时间路线图 1.4 各版本介绍 1.5 JDK各版本下载链接 1.6 如何学习新特性 2. Java8新特性&#xff1a;Lambda表达式 2.1 关于Java8新特性简介 …

C# | 上位机开发新手指南(十)加密算法——ECC

上位机开发新手指南&#xff08;十&#xff09;加密算法——ECC 文章目录 上位机开发新手指南&#xff08;十&#xff09;加密算法——ECC前言ECC的特性非对称性可逆性签名安全性高计算量和存储空间小 对比ECC与RSAC#中如何使用ECC加密与解密数据导入与导出秘钥签名与验证 结束…

PyQt Custom Widget

pyuic/pyside6-uic pip install PyQt6 pyqt6-tools或者 pip install PySide6假设你的自定义控件时from vtk.test2.testhead import testfaQ 首先拉一个QWidget 右键Promote to… 在header file里写上 vtk.test2.testhead&#xff08;写vtk/test2/testhead.h或者vtk/test2/te…

【改进灰狼优化算法】混沌灰狼优化算法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

当我把chatGPT作为Java面试官,它问了我这些问题

向chatGPT提问 面试官&#xff1a;你好&#xff0c;欢迎参加我们的Java面试。请先自我介绍一下。 面试者&#xff1a;非常感谢&#xff0c;我是一名资深Java开发工程师&#xff0c;具有丰富的Java开发经验。我在过去的五年里&#xff0c;主要从事了企业级Java应用的设计、开发…

VSCode纯手工配置C/C++项目

面向大二同学不想用Visual Studio的需求&#xff0c;探索Visual Studio Code平台上单纯利用C/C纯手动配置的方法&#xff0c;实现Release版本和Debug版本的调试和运行&#xff0c;并指定版本进行调试。 前置依赖项&#xff1a; C/C1 VSCode扩展配置文件列表&#xff0c;将下面的…

设计模式-1

1&#xff0c;设计模式概述 1.1 软件设计模式的产生背景 "设计模式"最初并不是出现在软件设计中&#xff0c;而是被用于建筑领域的设计中。 1977年美国著名建筑大师、加利福尼亚大学伯克利分校环境结构中心主任克里斯托夫亚历山大&#xff08;Christopher Alexand…

设计模式-行为型模式之命令模式

行为型模式 行为型模式(Behavioral Pattern)是对在 不同的对象之间 划分责任和 算法的抽象化。 行为型模式不仅仅关注类和对象的结构&#xff0c;而且 重点关注它们之间的相互作用。 通过行为型模式&#xff0c;可以 更加清晰地划分类与对象的职责&#xff0c;并研究系统在运行…

Spring入门案例--bean基础配置

bean基础配置(id与class) 对于bean的基础配置&#xff0c;在前面的案例中已经使用过: 1 <bean id"" class""/> 其中&#xff0c;bean标签的功能、使用方式以及id和class属性的作用&#xff0c;我们通过一张图来描述下 这其中需要大家重点掌握的…

少儿编程 电子学会图形化编程等级考试Scratch二级真题解析(选择题)2022年9月

2022年9月scratch编程等级考试二级真题 选择题(共25题,每题2分,共50分) 1、数列:1,2,3,4,6,9,13,19,28,...的下一项是多少 A、37 B、39 C、41 D、47 答案:C 考点分析:考查观察能力和逻辑推理能力,从前面数字可以观察到一些规律: 第4个数字,是由前面…

C++初阶—string类(3)模拟实现

目录 0.前言 1 .构造函数—析构函数—[]重载实现 2.深浅拷贝问题 2.1 浅拷贝 2.2 深拷贝 2.3写时拷贝 3.拷贝函数——赋值重载传统及现代写法 4.迭代器实现 5.reserve、push_back、append、运算符重载 6.insert、erase实现 7.find、关系运算符、流插入流提取等的实现…

学了半个月js 感觉一点都不会 ,怎么办?

前言 结合你的提问的具体情况&#xff0c;我想说如果你不是天才&#xff0c;那仅仅只靠半个月的学习就想掌握js那是绝无可能的&#xff0c;至于你说的感觉一点都不会在我看来是夸大了&#xff0c;极大可能是因为你没有去整合回顾知识&#xff0c;脑里的知识点相当的混乱&#…

Faster-RCNN代码解读7:主要文件解读-下

Faster-RCNN代码解读7&#xff1a;主要文件解读-下 前言 ​ 因为最近打算尝试一下Faster-RCNN的复现&#xff0c;不要多想&#xff0c;我还没有厉害到可以一个人复现所有代码。所以&#xff0c;是参考别人的代码&#xff0c;进行自己的解读。 ​ 代码来自于B站的UP主&#xff…

Chapter12-主从同步机制

12.1 同步属性信息 Slave 需要和 Master 同步的不只 是 消息本身&#xff0c;一些元数据信息也需要 同步&#xff0c;比如 TopicConfig 信息 、 ConsumerOffset 信息 、 DelayOffset 和SubscriptionGroupConfig 信息 。 Broker 在启动的时候&#xff0c;判断自己的角色是否是Sl…

DPDK简介

什么是DPDK 对于用户来说&#xff0c;它可能是一个性能出色的包数据处理加速软件库&#xff1b;对于开发者来说&#xff0c;它可能是一个实践包处理新想法的创新工场&#xff1b;对于性能调优者来说&#xff0c;它可能又是一个绝佳的成果分享平台。 DPDK用软件的方式在通用多…

使用git clone 拉去git仓库地址时报错 Failed to connect to github.com port 443: Timed out

问题描述 最近发现访问不了GitHub 使用ping 连接失败 ping github.com甚至连GitHub中的项目拉取不下来&#xff0c;报错信息如下&#xff1a; fatal: unable to access ‘https://github.com/josdejong/mathjs.git/’: Failed to connect to github.com port 443: Timed out …

在IDE中使用Bito - 一个不需要VPN就可以使用的chatgpt

文章目录 在IDE中使用Bito什么是Bito为什么要使用BitoBito可以做什么如何在IDE中安装Bito使用Bito 在IDE中使用Bito 什么是Bito 用他自己的介绍就是&#xff1a; Bito’s AI helps developers dramatically accelerate their impact. It’s a Swiss Army knife of capabilit…

Springboot如何启动内嵌tomcat

只需要引入如下依赖即可&#xff1a; 1.首先判断容器的类型&#xff0c;这里是servlet类型 org.springframework.boot.WebApplicationType#deduceFromClasspath 2.根据容器类型创建容器&#xff1a; org.springframework.boot.SpringApplication#createApplicationContext …

单链表面试题思路分享二

单链表面试题思路分享二 前言1.合并两个有序链表1.1 审题1.2 代码实现1.3 代码优化 2. 链表的分割2.1 审题2.2 代码实现 3. 链表的回文结构3.1 审题3.2 代码实现 4. 链表相交4.1 审题4.2 代码实现4.3 方法二的实现 5. 总结 前言 我们紧接上文单链表面试题分享一来看看本章我要分…

解决PySide6/PyQT的界面卡死问题(PySide6/PyQT多线程

前言 问&#xff1a;在使用 PySide6 时候&#xff0c;会出现应用程序卡死的问题。 答&#xff1a;为什么会出现这个问题呢&#xff1f;PySide6 应用程序是基于事件驱动的&#xff0c;主线程负责处理GUI事件。如果有耗时的操作任务&#xff0c;GUI 事件将被阻塞&#xff0c;应用…