[JS] IntersectionOberver使用

元皓
• 阅读 1455

使用场景:
判定目标元素是否进入或离开一个容器。
如果目标元素进入或离开容器,可以触发回调函数,执行操作逻辑。

相比于使用监听scroll事件并计算的方式,使用IntersectionOberver可以降低性能开销。

极简入门配置
准备好3个要素:
1、option 构造函数的配置项。
2、function 监听事件发生后的处理逻辑。
3、element 被监听元素。
[JS] IntersectionOberver使用

使用
1.创建interSectionObserver实例(容器)。
2.interSectionObserver监听指定元素。
[JS] IntersectionOberver使用

对上述配置的补充说明:
1.options中的root如果不设置,默认为null,此时容器为window。
2.options中的threshold = 0.2,此配置设置后,当被观察元素出现在容器中的区域面积大于20%时触发handleChange。
3.handleChange有四种情况会触发。
如下图所示
[JS] IntersectionOberver使用

4.entries[0].isIntersecting 的值为true,表示满足threshold条件(被观察元素出现在容器中)。handleChange中可以使用这个值做逻辑判断

注意:
页面销毁时(准确的说是销毁前),需要取消观察,并把intersectionOberver释放

window.onbeforeunload = function() {
   intersectionObserver.unobserve(obInner3);
   intersectionObserver = null;
};

代码示例见
https://github.com/DiracKeeko...

完结

同步更新到自己的语雀
https://www.yuque.com/diracke...

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Karen110 Karen110
4年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
JQ选择器
如果你想寻找id以“sub\_”开头的元素,你可以使用:$("id^'sub_'")如果你想寻找id以“trim”结尾的元素,你可以使用:$("id$'trim'")要获得id包含“AAA”的元素,需要使用(这比遍历要快)$("id'trim'")可以指定元素类型input或者其他标签
Wesley13 Wesley13
3年前
mysql中时间比较的实现
MySql中时间比较的实现unix\_timestamp()unix\_timestamp函数可以接受一个参数,也可以不使用参数。它的返回值是一个无符号的整数。不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果使用参数,参数的类型为时间类型或者时间类型的字符串表示,则是从1970010100:00:0
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Easter79 Easter79
3年前
Spring高级应用之注入嵌套Bean
在Spring中,如果某个Bean所依赖的Bean不想被Spring容器直接访问,可以使用嵌套Bean。和普通的Bean一样,使用<bean元素来定义嵌套的Bean,嵌套Bean只对它的外部的Bean有效,Spring容器无法直接访问嵌套的Bean,因此定义嵌套Bean也无需指定id属性。如下配置片段是一个嵌套Bean的示例:<bean id
Wesley13 Wesley13
3年前
PHP中的NOW()函数
是否有一个PHP函数以与MySQL函数NOW()相同的格式返回日期和时间?我知道如何使用date()做到这一点,但是我问是否有一个仅用于此的函数。例如,返回:2009120100:00:001楼使用此功能:functiongetDatetimeNow(){
元皓
元皓
Lv1
后来我们温一壶酒你我都像最初的模样
文章
4
粉丝
0
获赞
0