Web前端之监听元素的重叠度、设置所有元素的滚动条宽度都为0、节点布局的交叉状态、生成随机图片、阮一峰、标签、IntersectionObserver

静态效果

Html

<div><divid="idBox"class="box"></div><divid="idLoading"class="loading">加载更多</div></div>

JavaScript

functioninit(){letelStr='<div class="grid_box">';for(leti=0;i<13;i++){elStr+='<div class="img_box">';elStr+=`<img src="https://picsum.photos/200/300?${i}" />`;elStr+='</div>';}elStr+='</div>';idBox.innerHTML=elStr;}// 初始化页面init();// 监听元素的重叠度constidLoading=document.querySelector('#idLoading');constob=newIntersectionObserver(function(entries){constentry=entries[0];if(entry.isIntersecting)console.log('加载更多');},{root:null,threshold:0});ob.observe(idLoading);// 可以观察多个元素// ob.observe(idLoading);// ob.observe(idLoading);// ob.observe(idLoading);// ob.observe(idLoading);

Style

*::-webkit-scrollbar{width:0px;}.box{display:flex;justify-content:center;}.grid_box{display:grid;grid-template-columns:200px 200px 200px 200px 200px;grid-column-gap:10px;grid-row-gap:10px;}.img_box{display:flex;justify-content:center;align-items:center;}.loading{font-size:16px;text-align:center;height:30px;line-height:30px;margin-top:10px;}

IntersectionObserver

阮一峰
简单使用

let ob = new IntersectionObserver(callback, option);

callback参数

目标元素的可见性变化时，就会调用观察器的回调函数callback。
callback一般会触发两次。一次是目标元素刚刚进入视口(开始可见)，另一次是完全离开视口(开始不可见)。

letob=newIntersectionObserver(entries=>{console.log(entries);});

上面代码中，回调函数采用的是箭头函数的写法。callback函数的参数(entries)是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

option对象

IntersectionObserver构造函数的第二个参数是一个配置对象。它可以设置以下属性。

1、threshold属性
threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例(intersectionRatio)达到0时触发回调函数。

newIntersectionObserver(entries=>{/* ... */},{threshold:[0,0.25,0.5,0.75,1]});

用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素0%、25%、50%、75%、100% 可见时，会触发回调函数(当只有一个参数时，可以单独写一个数字，比如，0，0.5，1就表示与视口交叉百分值多少触发)。

2、root属性和rootMargin属性
很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动(比如在iframe窗口里滚动)。容器内滚动也会影响目标元素的可见性，参见阮一峰文章开始时的那张示意图。
IntersectionObserver API支持容器内滚动。root属性指定目标元素所在的容器节点(即根元素)。注意，容器元素必须是目标元素的祖先节点。

letopts={root:document.querySelector('.container'),rootMargin:"500px 0px"};letobserver=newIntersectionObserver(callback,opts);

上面代码中，除了root属性，还有rootMargin属性。后者定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom和left四个方向的值。
这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。

注意

IntersectionObserver API是异步的，不随着目标元素的滚动同步触发。
规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

MDN

IntersectionObserver接口(从属于Intersection Observer API)提供了一种异步观察目标元素与其祖先元素或顶级文档视口(viewport)交叉状态的方法。其祖先元素或视口被称为根(root)。
当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。