IntersectionObserver对象

IntersectionObserver对象

IntersectionObserver对象，从属于Intersection Observer API，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗viewport交叉状态的方法，祖先元素与视窗viewport被称为根root，也就是说IntersectionObserver API，可以自动观察元素是否可见，由于可见visible的本质是，目标元素与视口产生一个交叉区，所以这个API叫做交叉观察器，兼容性https://caniuse.com/?search=IntersectionObserver。

描述

IntersectionObserver解决了一个长期以来Web的问题，观察元素是否可见，这个可见visible的本质是，目标元素与视口产生一个交叉区，所以这个API叫做交叉观察器。
要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。现在很多需求下都需要用到相交检测，例如图片懒加载、内容无限滚动、检测元素的曝光情况、可视区域播放动画等等，相交检测通常要用到onscroll事件监听，并且可能需要频繁调用Element.getBoundingClientRect()等方法以获取相关元素的边界信息，事件监听和调用Element.getBoundingClientRect都是在主线程上运行，因此频繁触发、调用可能会造成性能问题，这种检测方法极其怪异且不优雅。
Intersection Observer API会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时或viewport，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行，这样网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理，注意Intersection Observer API无法提供重叠的像素个数或者具体哪个像素重叠，他的更常见的使用方式是当两个元素相交比例在N%左右时，触发回调，以执行某些逻辑。

const io = new IntersectionObserver(callback, option);// 开始观察
io.observe(document.getElementById("example"));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();
  • 参数callback，创建一个新的IntersectionObserver对象后，当其监听到目标元素的可见部分穿过了一个或多个阈thresholds时，会执行指定的回调函数。
  • 参数option，IntersectionObserver构造函数的第二个参数是一个配置对象，其可以设置以下属性:
    • threshold属性决定了什么时候触发回调函数，它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例intersectionRatio达到0时触发回调函数，用户可以自定义这个数组，比如[0, 0.25, 0.5, 0.75, 1]就表示当目标元素0%、25%、50%、75%、100%可见时，会触发回调函数。
    • root属性指定了目标元素所在的容器节点即根元素，目标元素不仅会随着窗口滚动，还会在容器里面滚动，比如在iframe窗口里滚动，这样就需要设置root属性，注意，容器元素必须是目标元素的祖先节点。
    • rootMargin属性定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小，它使用CSS的定义方法，比如10px 20px 30px 40px，表示top、right、bottom和left四个方向的值。
  • 属性IntersectionObserver.root只读，所监听对象的具体祖先元素element，如果未传入值或值为null，则默认使用顶级文档的视窗。
  • 属性IntersectionObserver.rootMargin只读，计算交叉时添加到根root边界盒bounding box的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要，此属性返回的值可能与调用构造函数时指定的值不同，因此可能需要更改该值，以匹配内部要求，所有的偏移量均可用像素pixel、px或百分比percentage、%来表达，默认值为0px 0px 0px 0px。
  • 属性IntersectionObserver.thresholds只读，一个包含阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率，当监听对象的任何阈值被越过时，都会生成一个通知Notification，如果构造器未传入值，则默认值为0。
  • 方法IntersectionObserver.disconnect()，使IntersectionObserver对象停止监听工作。
  • 方法IntersectionObserver.observe()，使IntersectionObserver开始监听一个目标元素。
  • 方法IntersectionObserver.takeRecords()，返回所有观察目标的IntersectionObserverEntry对象数组。
  • 方法IntersectionObserver.unobserve()，使IntersectionObserver停止监听特定目标元素。

此外当执行callback函数时，会传递一个IntersectionObserverEntry对象参数，其提供的信息如下。

  • time:可见性发生变化的时间，是一个高精度时间戳，单位为毫秒。
  • target:被观察的目标元素，是一个DOM节点对象。
  • rootBounds:根元素的矩形区域的信息，是getBoundingClientRect方法的返回值，如果没有根元素即直接相对于视口滚动，则返回null。
  • boundingClientRect:目标元素的矩形区域的信息。
  • intersectionRect:目标元素与视口或根元素的交叉区域的信息。
  • intersectionRatio:目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0。

应用

实现一个使用IntersectionObserver的简单示例，两个方块分别可以演示方块1是否在屏幕可见区域内以及方块2是否在方块1的相对可见交叉区域内，另外可以使用IntersectionObserver可以进行首屏渲染的优化，可以参考https://github.com/WindrunnerMax/EveryDay/blob/master/Vue/Vue%E9%A6%96%E5%B1%8F%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%BB%84%E4%BB%B6.md。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> body{margin: 0;padding: 0;height: 100vh;width: 100vw;overflow-x: hidden;}.flex{display: flex;}.top-fixed{top: 0;position: fixed;}.placeholder1{width: 100%;}#box1{height: 200px; overflow-y: auto; border: 1px solid #aaa; width: 60%;}.box1-placeholder{height: 105vh;}#box2{height: 100px; background-color: blue; margin-top: 300px; width: 60%;}.box2-placeholder{height: 205px;}</style>
</head>
<body><section class="flex top-fixed"><div class="flex">BOX1:</div><div class="flex" id="box1-status">invisible</div><div class="flex">&nbsp;BOX2:</div><div class="flex" id="box2-status">invisible</div></section><div class="box1-placeholder"></div><div id="box1"><div class="box2-placeholder"></div><div id="box2"></div>   <div class="box2-placeholder"></div></div><div class="box1-placeholder"></div></body>
<script>(function(){const box1 = document.querySelector("#box1");const box2 = document.querySelector("#box2");const box1Status = document.querySelector("#box1-status");const box2Status = document.querySelector("#box2-status");const box1Observer = new IntersectionObserver(entries => {entries.forEach(item => {// `intersectionRatio`为目标元素的可见比例，大于`0`代表可见if (item.intersectionRatio > 0) {box1Status.innerText = "visible";}else{box1Status.innerText = "invisible";}});}, {root: document});const box2Observer = new IntersectionObserver(entries => {entries.forEach(item => {// `intersectionRatio`为目标元素的可见比例，大于`0`代表可见if (item.intersectionRatio > 0) {box2Status.innerText = "visible";}else{box2Status.innerText = "invisible";}});}, {root: box1});box1Observer.observe(box1);box2Observer.observe(box2);})();
</script>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/eadd83d794c8
https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c#---多态

c#---多态

在 C#语言中体现多态有三种方式&#xff1a;虚方法&#xff0c;抽象类&#xff0c; 接口 一、虚方法 什么是虚方法&#xff1f; 在父类中使用 virtual 关键字修饰的方法&#xff0c; 就是虚方法。在子类中可以使用 override 关键字对该虚方法进行重写。 class Animal {public…
阅读更多...
android apk没有源码如何修改程序

android apk没有源码如何修改程序

如果您拥有一个APK文件但没有源代码&#xff0c;您可以尝试以下几种方法来进行修改&#xff1a; 反编译APK&#xff1a;使用工具如apktool对APK文件进行反编译&#xff0c;这将为您提供源代码和资源文件。 动态调试&#xff1a;使用调试工具连接设备或模拟器&#xff0c;并动态…
阅读更多...
重装前端整体流程

重装前端整体流程

用户管理 --汇总 -- 明细-CSDN博客 一、node 这个看环境变量 2023最新版Node.js下载安装及环境配置教程&#xff08;非常详细&#xff09;从零基础入门到精通&#xff0c;看完这一篇就够了_nodejs安装及环境配置-CSDN博客 配置到国内镜像的时候&#xff0c;去看&#xff0c;淘…
阅读更多...
理解固化的Maven依赖：spring-boot-starter-parent 与 spring-boot-dependencies

理解固化的Maven依赖：spring-boot-starter-parent 与 spring-boot-dependencies

目录 理解固化的Maven依赖&#xff1a;spring-boot-starter-parent 与 spring-boot-dependencies1. spring-boot-starter-parent1.1 简介1.2 特点 2. spring-boot-dependencies2.1 简介2.2 特点 3. 异同点对比3.1 相同点3.2 不同点案例一&#xff1a;使用 spring-boot-starter-…
阅读更多...
Java方法的重载

Java方法的重载

方法重载 1. 为什么需要方法重载 public class TestMethod{public static void main (String[] args){int a 10;int b 20;int ret add(a,b);System.out.println("ret "ret);double a2 10.5;double b2 20.5;double ret2 add(a2,b2);System.out.println("…
阅读更多...
《QT实用小工具·六十二》基于QT实现贝塞尔曲线画炫酷的波浪动画

《QT实用小工具·六十二》基于QT实现贝塞尔曲线画炫酷的波浪动画

1、概述 源码放在文章末尾 该项目实现了通过贝塞尔曲线画波浪动画&#xff0c;可控制 颜色密度速度加速度 安装与运行环境 语言&#xff1a;C 框架&#xff1a;Qt 11.3 平台&#xff1a;Windows 将屏幕水平平均分为10块&#xff0c;在一定范围内随机高度的12个点&#xff08;…
阅读更多...
飞天使-k8s知识点29-kubernetes安装1.28.0版本

飞天使-k8s知识点29-kubernetes安装1.28.0版本

文章目录 选用版本初始化服务器,自己修改里面的ipreboot haproxy安装 &#xff0c;可以参考我之前写的内核参数调整&#xff0c;安装docker 安装cri-dockerd开始安装集群工具下载镜像以及启用完毕之后 此时的coredns 不通结果展示 选用版本 k8s 1.24版本之前还可以使用docker&…
阅读更多...
【初阶数据结构】顺序表OJ题讲解

【初阶数据结构】顺序表OJ题讲解

前言 &#x1f4da;作者简介&#xff1a;爱编程的小马&#xff0c;正在学习C/C&#xff0c;Linux及MySQL。 &#x1f4da;本文收录与初阶数据结构系列&#xff0c;本专栏主要是针对时间、空间复杂度&#xff0c;顺序表和链表、栈和队列、二叉树以及各类排序算法&#xff0c;持…
阅读更多...
基于ambari hdp的kafka用户授权读写权限

基于ambari hdp的kafka用户授权读写权限

基于ambari hdp的kafka用户授权读写权限 版本Kafka 2.0.0添加自定义配置修改admin密码重启kafka授权读取授权写入有效通配符部分举例 版本Kafka 2.0.0 添加自定义配置 authorizer.class.name kafka.security.auth.SimpleAclAuthorizer super.users User:admin allow.everyo…
阅读更多...
【LLM 论文】Step-Back Prompting：先解决更高层次的问题来提高 LLM 推理能力

【LLM 论文】Step-Back Prompting：先解决更高层次的问题来提高 LLM 推理能力

论文&#xff1a;Take a Step Back: Evoking Reasoning via Abstraction in Large Language Models ⭐⭐⭐⭐ Google DeepMind, ICLR 2024, arXiv:2310.06117 论文速读 该论文受到的启发是&#xff1a;人类再解决一个包含很多细节的具体问题时&#xff0c;先站在更高的层次上解…
阅读更多...
Android 屏幕适配全攻略（上）-掌握屏幕单位，应对千变万化的设备

Android 屏幕适配全攻略（上）-掌握屏幕单位，应对千变万化的设备

本文从 Android 开发中常见的长度单位 px、dp、sp 入手&#xff0c;详细介绍了它们的特点及转换关系。 接着深入探讨了屏幕尺寸、分辨率、像素密度等重要的屏幕指标&#xff0c;帮助读者全面理解它们之间的联系。最后&#xff0c;通过实例代码演示了如何在代码中进行单位转换&…
阅读更多...
三分钟上手安全渗透系统Kali Linux

三分钟上手安全渗透系统Kali Linux

kali linux系统集成了常用的安全渗透工具&#xff0c;省去了安装工具的时间&#xff0c;做安全相关的工作是非常推荐使用的。 安装Kalii Linux 安装系统 一般使用虚拟机进行安装&#xff0c;Kali Linux基于Debian内核&#xff0c;虚拟机的操作系统选择Debian 7.x 64 选择系统…
阅读更多...
【SRC实战】一键完成全部任务获取奖励

【SRC实战】一键完成全部任务获取奖励

挖个洞先 https://mp.weixin.qq.com/s/LkPfJuuP1K8vaFXRn-8wVg “ 以下漏洞均为实验靶场&#xff0c;如有雷同&#xff0c;纯属巧合 ” 01 — 漏洞证明 一、业务逻辑 “ 如何欺骗APP完成任务获取奖励&#xff1f; ” 1、记录金币数量20 2、浏览商品详情页 3、点击浏览提…
阅读更多...
我们应该如何做参与式观察

我们应该如何做参与式观察

记得多年以前&#xff0c;有个朋友问我&#xff1a;对于做观察&#xff0c;有人通过教授绘画技巧来教人如何做观察。你们研究员又不会画画&#xff0c;你们如何让人相信你们更会观察呢&#xff1f;坦率说&#xff0c;当时我被问住了&#xff0c;因为我从来没有进行过这样的对比…
阅读更多...
day5Qt作业

day5Qt作业

服务器端 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//准备组件&#xff0c;初始化组件状态this->setFixedSize(800,600);chatwidget new QListWidge…
阅读更多...
代码随想录算法训练营第四十九天| 123.买卖股票的最佳时机III，188.买卖股票的最佳时机IV

代码随想录算法训练营第四十九天| 123.买卖股票的最佳时机III，188.买卖股票的最佳时机IV

目录 题目链接&#xff1a;123.买卖股票的最佳时机III 思路 代码 题目链接&#xff1a;188.买卖股票的最佳时机IV 思路 代码 总结 题目链接&#xff1a;123.买卖股票的最佳时机III 思路 与之前买卖股票不同的是本题要求最多买卖两次&#xff0c;那么dp数组以及递推公式都…
阅读更多...
攻击者正在利用AI，对保险公司发起大规模欺诈

攻击者正在利用AI，对保险公司发起大规模欺诈

保险欺诈一直是保险行业面临的重要挑战之一&#xff0c;尤其随着技术的进步&#xff0c;欺诈者也在不断更新其手段&#xff0c;利用AI技术&#xff0c;包括生成式模型、机器学习和数据分析工具等欺骗保险公司&#xff0c;而AI技术的应用正成为他们的新工具&#xff0c;使其犯罪…
阅读更多...
如何打造个人IP？

如何打造个人IP？

打造个人IP&#xff08;Intellectual Property&#xff09;是当今社会中越来越受到关注的话题。个人IP指的是个人在某个领域内所拥有的独特的、具有商业价值的知识、技能、品牌和影响力。为什么要打造个人IP&#xff1f;如何打造个人IP&#xff1f;下面我将为您详细解答。 首先…
阅读更多...
Navicat连接远程数据库时，隔一段时间不操作出现的卡顿问题

Navicat连接远程数据库时，隔一段时间不操作出现的卡顿问题

使用 Navicat 连接服务器上的数据库时&#xff0c;如果隔一段时间没有使用&#xff0c;再次点击就会出现卡顿的问题。 如&#xff1a;隔一段时间再查询完数据会出现&#xff1a; 2013 - Lost connection to MySQL server at waiting for initial communication packet, syste…
阅读更多...
LinkedList链表

LinkedList链表

LinkedList 的全面说明 LinkList底层实现了双向链表和双端队列特点可以添加任意元素&#xff08;元素可以重复&#xff09;&#xff0c;包括null线程不安全&#xff0c;没有实现同步 LinkedList 的底层操作机制 LinkedList底层维护了一个双向链表LinkList中维护了两个属性fi…
阅读更多...
最新文章

Copyright @ 2022~2023