IntersectionObserver滚动触底监听事件

IntersectionObserver滚动触底监听事件

场景

滚动触底事件、上拉加载、当前视窗与目标元素错位交互
目标元素出现在可视区外,未来可能出现在可视区内并触发一些回调,或请求新的数据。
默认HTML为顶级可视区,则涉及滚动的部分不在可视区内的可进行监听

const intersectionObserver = new IntersectionObserver((entries) => {
            if (entries[0].intersectionRatio <= 0) return;
            console.log("当前监听的目标元素在视窗内完全可见")
            // 此处为监听的目标元素完全暴露在可视范围内执行
            // 写你自己的代码逻辑    
          });
          const trAll = document.querySelectorAll('.ant-table-scroll tr');
          intersectionObserver.observe(trAll[trAll.length - 1]);// 里面替换成你要监听的目标元素(不在可视区范围内的)我这个地方是需要监听可视区外表格的最后一行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值