位置: 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)

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

  • 以旧换新销售商品
  • 小规模30万免增值税1点怎么申报税款
  • 物业公司增值税加计扣除
  • 增值税税率
  • 工商年报已报网上还查不出来
  • 增量留抵税额怎么做分录
  • 运输服务有3%的税率吗
  • 管理费用中税金分录怎么写
  • 对公账户卡号是私人账号
  • 进口增值税可以抵税吗
  • 固定资产管理中存在的问题及对策论文
  • 股权出让需要交税吗
  • 预算管理的方法及应用
  • 专项用途财政资金纳税调整规则
  • 企业所得税以前年度亏损怎么弥补
  • 联营企业的持股比例
  • 其他应付款可以用其他应收款代替吗
  • 增值税专用发票电子版
  • 机械设备已使用怎么处理
  • 汇算清缴退税调整利润表
  • 小规模公司税控盘维护费会计分录
  • 享受小型微利企业标准
  • 非正常损失和非正常损耗的区别
  • 浅谈使用链式管理加强特殊监管场所
  • 筹建期间业务招待汇算怎么填
  • php字符串定义的三种方式
  • vue移动和pc两套代码
  • 语音处理算法
  • 流动资产占总资产比重多少较为合适
  • vue3响应式丢失
  • 行政事业单位怎么开发票
  • split 文件分割
  • 公司购买空调属于电子设备吗
  • 中国男人百度百科
  • 个人出租房屋要交印花税吗
  • 差旅费账务处理例子
  • 应付工资怎么记账
  • 信息技术服务费怎么做会计分录
  • 质保金挂账是否需要发票
  • 新会计准则折旧年限
  • 个人提供劳务报酬如何交税
  • 贸易公司平价销售怎么样
  • 跨月发票红冲怎么做账务处理
  • 弱电工程怎么入账
  • 查账征收与核定征收在哪里看
  • 企业哪些税费不通过应交税费账户进行核算
  • 认缴的注册资金怎么做账
  • 带赠品折扣的发票怎么开
  • 企业营业利润率怎么算
  • 财务会计期末总结
  • win7下安装ubuntu
  • centos安装常用命令
  • .cda是什么文件
  • win8系统怎么清理缓存
  • windows升级后c盘满了
  • xp开始界面
  • linux 安装vs
  • mac合盖不休眠怎么办
  • 如何修改apache
  • windows语音识别
  • mcappins.exe - mcappins进程是什么文件 什么意思.
  • win7系统鼠标指针异常
  • linux执行sh文件显示不存在
  • linux系统主要用途
  • win7报错0xc0000428
  • win7速度
  • Win7摄像头驱动程序
  • python 邻接表
  • jquery td
  • python过程中遇到的问题
  • HttpURLConnection的流式输出的缺陷和解决方法
  • jquery 弹出页面
  • jquery选择器总结
  • javascript函数大全
  • js原生方法大全
  • 小规模纳税人开1%普票怎么报税
  • 成品油消费税税率包括哪些
  • 广西地方税务局决算公开表
  • 2015年购买15万元排量2.0的新车购置税怎么计算?
  • 小规模纳税人租赁费税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设