当前位置: 首页 > news >正文

IntersectionObserver“替代”滚动条监听

概要

IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口(viewport)交叉状态的方法。其祖先元素或视口被称为根(root)。

当一个 IntersectionObserver 对象被创建时,其被配置为监听根中一段给定比例的可见区域。可以在同一个观察者对象中配置监听多个目标元素。

当然IntersectionObserver不可能完全替代监听滚动条,只是相比于监听滚动条,IntersectionObserver更加方便快捷,并且目前大多数主流浏览器已经兼容

兼容性

IntersectionObserver 目前除了 IE 和 OperaMini,已经被主流的浏览器支持。

更多详情

 const ob = new IntersectionObserver((e) => {console.log(‘交叉触发回调’,e)}, {root:null, rootMargin:'10px',threshold: 0})ob.observe(目标dom)

回调函数参数说明

每次触发回调,会获得监听到的目标信息(回调接收的参数entries)
在这里插入图片描述

属性说明
boundingClientRect返回包含目标元素的边界信息,返回结果与element.getBoundingClientRect() 相同
intersectionRatio返回目标元素出现在可视区的比例,即交叉范围
intersectionRect用来描述root和目标元素的相交区域
isIntersecting返回一个布尔值,下列两种操作均会触发callback:1. 如果目标元素出现在root可视区,返回true。2. 如果从root可视区消失,返回false
rootBounds用来描述交叉区域观察者(intersection observer)中的根.
target目标元素:与根出现相交区域改变的元素 (Element)
time返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳

配置项说明

  • root:观察目标与谁交叉,可为其父元素或父元素的父元素,null表示观察目标与视口交叉

  • rootMargin:观察的范围的偏移量,可以有效的缩小或扩大根的判定范围从而满足计算需要,偏移量可用像素(px)或百分比(%)来表达,默认值为
    “0px 0px 0px 0px”。

在这里插入图片描述

  • threshold:触发回调的阈值的列表,按升序排列,列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。如果构造器未传入值,则默认值为0
    在这里插入图片描述

使用功能场景

图片懒加载、video不可见时停止播放、监听当前页面课件区域,侧边导航高亮显示等

以监听当前页面课件区域,侧边导航高亮显示为例
![在这里插入图片描述](https://img-blog.csdnimg.cn/d523fc731d46444d8ff7707861bfd5c4.png

//获取目标dom
const artical = document.querySelectorAll('.artical')
//被点击项的索引
let activeItemIndex = 0;
//获取全部导航项
let allListItem = dom.list.children//创建观察者
function articalObserve() {const ob = new IntersectionObserver((e) => {//当目标离开时不触发if (!e[0].isIntersecting) {return}//获取与root交叉的元素中自定义的indexactiveItemIndex = e[0].target.dataset.index//高亮this.moveTo(activeItemIndex)}, {root: document.querySelector('#head'),//被观察元素与视口交叉threshold: 0})dom.artical.forEach(item => {//对目标进行观察ob.observe(item)})
}//创建侧边导航
function getAsideList() {const list = [{ title: '概要' },{ title: '一、相关定义' },{ title: '二、我们如何收集和使用您的个人信息' },{ title: '三、信息的存储' },{ title: '四、信息安全' },{ title: '五、我们分享的信息' },{ title: '六、您的权利' },{ title: '七、变更' },{ title: '八、未成年人保护' },{ title: '九、其他' },{ title: '十、联系我们' },]for (let i = 0; i < list.length; i++) {const div = document.createElement('div')div.classList.add('list-item')//自定义属性每部分的indexdiv.setAttribute('index', i)//记录每个部分距离浏览器顶部高度,20为第一个部分距离页面顶部的偏移量div.setAttribute('top', dom.artical[i].offsetTop - 20)div.onclick = () => this.jumpTo(i, dom.artical[i].offsetTop - 20)div.innerText = list[i].title//将导航项加入到准备好的盒子父元素的dom.appendChild(div)}
}//高亮显示
function moveTo(i) {//移除之前元素的高亮let activeA = document.querySelector('.active')if (activeA) activeA.classList.remove('active')//为当前项添加高亮allListItem[i].classList.add('active')
}//点击导航滑动到指定部分
function jumpTo(i, t) {moveTo(i)//滚动到指定位置可滚动区域的dom.scrollTo({ top: t, behavior: 'smooth' })
}

运行效果

黄色区域为监听的根root,当每一部分与根(黄色区域)交叉时,触发回调,使导航高亮

在这里插入图片描述

相关文章:

IntersectionObserver“替代”滚动条监听

概要 IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口&#xff08;viewport&#xff09;交叉状态的方法。其祖先元素或视口被称为根&#xff08;root&#xff09;。 当一个 IntersectionObserver 对象被创建时&#xff0c;其被配置为监听根中…...

Maven下载安装及IDEA配置Maven的超详细教程

Maven下载安装及IDEA配置Maven的超详细教程 1、IntelliJ IDEA 下载、安装及配置过程2、maven下载、安装、配置过程2.1 mavan下载2.2 安装2.3 配置 3、在IDEA中配置Maven3.1 进入设置界面3.2 maven配置 4、IDEAmaven创建工程示例 Maven是一个能使我们的java程序开发节省时间和精…...

【JAVAEE】线程池基础知识⭐

目录 1.什么是线程池 2.为什么要使用线程池 3.怎么使用线程池 4.自定义一个线程池 5.为什么不推荐使用系统自带的线程池 5.1线程池构造方法的参数和含义 5.1.1拒绝策略 5.2线程池的工作原理 5.3为什么不适用系统自带的线程池 补充&#xff1a;工厂模式 1.什么是线程池…...

【源码解析】@ControllerAdvice实现异常捕获与响应增强处理的原理解析

全局异常处理 demo展示 Slf4j RestControllerAdvice public class GlobalExceptionAdvice {ExceptionHandler(RuntimeException.class)public R<Void> handleNotPermissionException(RuntimeException e, HttpServletRequest request) {String requestURI request.get…...

Visual Studio Code 插件的开发、调试及发布完整详细教程

本篇文章主要讲解:Vscode的拓展插件,从环境安装到生成项目文件再到调试及部署发布的完整开发教程。 日期:2023年5月10日 vscode 1.78.1 一、准备node环境及安装yo 项目初始化,优先安装yo、再通过yo创建code及插件项目。 基础条件 需要先安装node,且node环境已经正确安装…...

Qt音视频开发38-ffmpeg视频暂停录制的设计

一、前言 基本上各种播放器提供的录制视频接口,都是只有开始录制和结束录制两个,当然一般用的最多的也是这两个接口,但是实际使用过程中,还有一种可能需要中途暂停录制,暂停以后再次继续录制,将中间部分视频不需要录制,跳过这部分不需要的视频,而且录制的视频文件必须…...

bat脚本、dos命令

bat脚本 bat脚本就是DOS批处理脚本&#xff0c;就是将一系列DOS命令按照一定顺序排列而形成的集合&#xff0c;运行在windows命令行环境上。这个文件的每一行都是一条DOS命令 在命令提示下键入批处理文件的名称&#xff0c;或者双击该批处理文件&#xff0c;系统就会调用Cmd.…...

【星戈瑞】Sulfo-Cyanine5 mal红色荧光Cy5-maleimide

Sulfo-Cyanine5 mal是一种具有强荧光信号的染料&#xff0c;主要应用于生物荧光成像领域。它的化学式为C38H43KN4O9S2&#xff0c;分子量为803.00。这种染料具有良好的水溶性&#xff0c;可在水溶液中稳定存在。它的光学特性包括吸收峰位于646 nm和发射峰位于662 nm&#xff0c…...

Dcip的学习1-计算器

文章目录 前言一、配置安装环境1.1 网址1.2 再次打开需要进行的操作1.3 NodeJS控制台的操作1.4 出现的页面 二、Dcip生成计算器2.1 软件的基本单位 - Unitform中添加内容 2.2 OnleftChange(); 前言 只是为方便学习&#xff0c;不做其他用途&#xff0c; 一、配置安装环境 1.1 …...

ChatGPT使用9大技巧详解

目录 技巧1:To Do and Not To Do 技巧2:增加示例 技巧3:使用引导词,引导模型输出特定内容...

随机变量X,分布函数X~F(x)的理解。

1.随机变量X 1.通常认知的"x"与随机变量X 我们通常意义上的 x 是自变量&#xff0c;y f(x) 中的自变量。 但是 X 更多意义是 对应法则 " f " &#xff0c;X完整写法是 X(ω) ω ∈ Ω。 X这个对应法则&#xff0c;可以将样本点映射到实数轴上。 那么X这…...

11.构造器的查询.分块.聚合

学习要点&#xff1a; 1.构造器查询 2.分块.聚合 本节课我们来开始学习数据库的构造器查询以及分块和聚合查询。 一&#xff0e;构造器查询 1. table()方法引入相应的表&#xff0c;get()方法可以查询当前表的所有数据&#xff1b; //获取全部结果 $users DB::table(users)-&g…...

微服务保护——Sentinel

初识Sentinel 雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。 解决雪崩问题的常见方式有四种: 超时处理:设定超时时间&#xff0c;请求超过一定时间没有响应就返回错误信息&#xff0c;不会无休止等待舱壁…...

MySQL面试整理

https://houchen-study.oss-cn-hangzhou.aliyuncs.com/%E9%9D%A2%E8%AF%95/MySQL/MySQL%E9%9D%A2%E8%AF%95%E5%A4%A7%E5%85%A8%281%29.pdf 数据库基础知识 为什么要使用数据库&#xff1f; 什么是MySQL&#xff1f; 数据库的三大范式是什么&#xff1f; MySQL有关权限的表…...

Vscode C++环境配置

多文件编译 打开设置搜索coderunner 找到Executor Map 加入-I目录名 目录名/*.cpp 调试 点击调试以后会产生tasks.json文件&#xff0c;加入链接文件和库文件...

matlab小波去噪

本文将为您介绍如何利用MATLAB进行小波去噪处理&#xff0c;并应用于实际数据。小波去噪是一种通过对数据进行小波分解和重构的方法&#xff0c;有效地去除信号中的噪声&#xff0c;提高信号质量。该方法不仅广泛应用于信号处理、图像处理等领域&#xff0c;在实际生产和科研中…...

为什么要采用全网营销策略?全网营销有何优势?

现在市场上有很多全网营销公司&#xff0c;其实很多企业的经理人疑惑全网营销是要干什么&#xff1f;这些公司能干什么&#xff1f;这里小马识途营销顾问给大家做一个整体的解读。 全网营销&#xff0c;概括地说就是在整个互联网&#xff0c;利用各类互联网平台和工具对产品和服…...

prometheus实战之四:alertmanager的部署和配置

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文是《prometheus实战》系列的第四篇&#xff0c;在《prometheus实战之三&#xff1a;告警规则》中曾经提到过&#xff0c;整个告警功能分为规则和…...

【Python】glob 包的介绍和使用

glob 是 Python 标准库中的一个模块&#xff0c;它提供了一种查找符合特定模式的路径名的方法&#xff0c;类似于命令行中的 glob 命令。glob 模块用于读取指定路径下的所有符合特定规律的文件名&#xff0c;非常适合用于读取文件夹中的文件列表和操作符合特定规律文件列表。 …...

剑指offer(C++)-JZ48:最长不含重复字符的子字符串(算法-动态规划)

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 题目描述&#xff1a; 请从字符串中找出一个最长的不包含重复字符的子字符串&#xff0c;计算该最长子字符串的长度。 数据范围…...

基于SenseVoice-Small的语音日记应用开发指南

基于SenseVoice-Small的语音日记应用开发指南 1. 语音日记应用的核心价值 你有没有想过&#xff0c;每天用说话的方式记录生活&#xff0c;然后自动变成文字日记&#xff1f;这种语音日记的方式特别适合忙碌的现代人&#xff0c;不用打字&#xff0c;随时随地都能记录心情和想…...

Mac Mouse Fix解决方案:让第三方鼠标在macOS上重获新生的完全指南

Mac Mouse Fix解决方案&#xff1a;让第三方鼠标在macOS上重获新生的完全指南 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix macOS系统对第三方鼠标的支持…...

告别调包:手把手教你用PyTorch从零复现CRNN文本识别网络(附完整代码)

从零构建CRNN文本识别引擎&#xff1a;PyTorch实战指南与工业级优化技巧 在计算机视觉领域&#xff0c;文本识别技术正经历着从传统算法到深度学习的革命性转变。当我们谈论OCR&#xff08;光学字符识别&#xff09;时&#xff0c;CRNN&#xff08;卷积循环神经网络&#xff0…...

DeOldify图像上色服务Node.js调用实战:构建自动化批处理工具

DeOldify图像上色服务Node.js调用实战&#xff1a;构建自动化批处理工具 你是不是也遇到过这样的情况&#xff1f;手头有一大堆珍贵的老照片&#xff0c;都是黑白的&#xff0c;想给它们上色却无从下手。一张张手动处理&#xff1f;那得花多少时间啊。或者&#xff0c;你所在的…...

EverythingPowerToys自定义程序集成:扩展外部应用打开方式的完整教程

EverythingPowerToys自定义程序集成&#xff1a;扩展外部应用打开方式的完整教程 【免费下载链接】EverythingPowerToys Everything search plugin for PowerToys Run 项目地址: https://gitcode.com/gh_mirrors/ev/EverythingPowerToys EverythingPowerToys是一款强大的…...

智能硬件开发实战:用天问Block给ASRPRO芯片添加声控功能(含完整代码)

智能硬件开发实战&#xff1a;用天问Block给ASRPRO芯片实现声控LED系统 在智能家居和玩具开发领域&#xff0c;语音交互正成为最自然的控制方式。传统嵌入式开发需要编写复杂代码&#xff0c;而天问Block的图形化编程让创客们能像搭积木一样快速实现语音控制功能。本文将带你用…...

各版本易筋经意识层操作的系统动力学分析

——基于同源共律公理与锚序公式的元逻辑推导摘要本报告以同源共律公理与三维解耦框架为分析工具&#xff0c;对易筋经七种主要版本的意识层要求进行系统性拆解与比较。通过将各版本意识操作映射至“意识层类型→能量层共振→物理层显化”的因果链&#xff0c;揭示其内在优劣与…...

Lattice Diamond 3.11安装到实战:一个FPGA小白的避坑血泪史(附完整问题清单)

Lattice Diamond 3.11安装到实战&#xff1a;一个FPGA小白的避坑血泪史&#xff08;附完整问题清单&#xff09; 如果你正准备踏入Lattice FPGA的世界&#xff0c;手里攥着Diamond 3.11安装包&#xff0c;既兴奋又忐忑——这篇文章就是为你准备的。作为过来人&#xff0c;我深知…...

从设计稿到上架:一份给独立开发者的Android应用图标全流程制作指南

从设计稿到上架&#xff1a;独立开发者的Android应用图标全流程实战 在移动应用生态中&#xff0c;图标是用户对产品的第一印象。Google Play商店数据显示&#xff0c;专业设计的应用图标能提升40%以上的点击率。但对于独立开发者和小团队而言&#xff0c;如何在有限资源下打造…...

Kubernetes Python Client批量管理秘籍:1000+Pod运维实战

Kubernetes Python Client批量管理秘籍&#xff1a;1000Pod运维实战 【免费下载链接】python Official Python client library for kubernetes 项目地址: https://gitcode.com/gh_mirrors/python1/python Kubernetes Python Client是管理Kubernetes集群的官方Python客户…...