位置: IT常识 - 正文

IntersectionObserver API详解(IntersectionObserver 翻译)

编辑:rootadmin
IntersectionObserver API详解

推荐整理分享IntersectionObserver API详解(IntersectionObserver 翻译),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:IntersectionObserver 小程序,IntersectionObserver 优点,IntersectionObserver API,IntersectionObserver vue,IntersectionObserver mdn,IntersectionObserver 这个api了解一下,IntersectionObserver API,IntersectionObserver mdn,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

二、callback 参数

当以下情况发生时会调用回调函数:

Observer 第一次监听目标元素的时候每当目标元素与设备视窗或者其他指定元素发生交集的时候执行IntersectionObserver API详解(IntersectionObserver 翻译)

  

callback函数的参数(entries)是一个数组,每个成员都是一个IntersectionObserverEntry对象。举例来说,如果同时有两个被观察的对象的可见性发生变化,entries数组就会有两个成员。

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

boundingClientRect:目标元素的矩形区域的信息intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0intersectionRect:目标元素与视口(或根元素)的交叉区域的信息rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回nullisIntersecting:目标元素是否与视口(或根元素)交叉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>

无限滚动(infinite scroll)的实现也很简单。通过观察#loadMore元素与浏览器视图的是否交叉,如果交叉则意味着列表已经加载完毕,继续添加更多的元素。

参考:

Intersection Observer API - Web API 接口参考 | MDN

IntersectionObserver API 使用教程 - 阮一峰的网络日志

本文链接地址:https://www.jiuchutong.com/zhishi/298783.html 转载请保留说明!

上一篇:nodejs和npm版本不匹配(node与nodejs)

下一篇:瑞吉外卖项目:编辑员工信息与公共字段自动填充(瑞吉外卖项目简历)

  • 企业所得税是什么意思
  • 税后净利润是什么意思
  • 汽车销售和租赁哪个大
  • 交通运输企业车辆折旧能加速扣除
  • 财务报表分析五种方法
  • 开专票需要交城建税吗
  • 员工预支薪金怎么记账
  • 小规模纳税人建筑服务税率是多少
  • 企业财产损失审批前后的账务处理
  • 个人垫付费用报销申请怎么写
  • 建筑工地不按月发工资怎么办
  • 工程项目中的设备主要包括什么和什么
  • 收到跨境分红的会计处理怎么做?
  • 当期免抵税额和当期免抵退税额
  • 营改增怎么还有机打发票吗
  • 怎么看发票是不是免税
  • 二手房增值税怎么收取
  • 财税[2012]15
  • 房地产公司靠什么赚钱
  • 递延所得税怎么计提
  • 公司收到保险公司的理赔款怎么做分录
  • 社保不报的情况下保险报销吗
  • 绿植租赁公司都适合什么名字
  • 小规模纳税人废品站卖废品发票开什么项目
  • 收到退回留抵退款的短信
  • 进口应税消费品的组成计税价格公式
  • 利润表中的销售收入
  • win11系统进程
  • windows10专业版是哪个版本
  • 进口货物可以退回吗
  • 收到厂家返利怎么做账务处理
  • 费用怎么冲销
  • 预付款挂账什么意思
  • win7怎么更改开机启动项
  • 电脑连上WiFi上不了网怎么办?
  • 发票开了对方未付款
  • 农产品核定扣除办法
  • 有限责任公司股东对公司债务承担
  • 工业企业如何纳税
  • php微信公众号消息推送
  • 异地项目需要预缴增值税吗
  • 捐款 企业
  • 理财利息可以计息吗
  • mongorepository排序
  • 多计提的个税能退回给员工吗
  • 建筑企业的收入特点有哪些
  • SQL2005 自动备份的脚本
  • 小企业长期债券投资损失应当计入
  • 固定资产减值损失计入
  • 预算会计与企业会计的区别感悟
  • 应收账款收不回来了应怎么做会计分录
  • 没有发票可以先付款吗
  • 未支付怎么取消
  • 金以旧换新合适吗
  • 12月结账后要年度结转吗
  • 红字的记账凭证怎么记账
  • 长期待摊费用是经营性资产吗
  • sql语句错误提示
  • sql行变列有几种方法
  • xp系统重装u盘
  • xp系统删除用户账户怎么没有删除键
  • win7系统连接打印机没有反应
  • windows xp
  • mac休眠怎么设置
  • centos6启动服务的命令
  • nero recode
  • windows7中彻底删除文件的操作
  • 系统右键菜单
  • win10 ug
  • 批处理查询文件是否存在
  • opengl绘图
  • 阿里面试题和答案
  • 编写一个c#
  • javascript的理解
  • android基础知识
  • python字符串的编码规则
  • jQuery中text() val()和html()的区别实例详解
  • 已申报的纳税申报表怎么下载打印
  • 税务系统党支部工作法
  • 税收超额负担图解
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设