MENU静态效果HtmlJavaScriptStyleIntersectionObserver静态效果HtmldivdivididBoxclassbox/divdivididLoadingclassloading加载更多/div/divJavaScriptfunctioninit(){letelStrdiv classgrid_box;for(leti0;i13;i){elStrdiv classimg_box;elStrimg srchttps://picsum.photos/200/300?${i} /;elStr/div;}elStr/div;idBox.innerHTMLelStr;}// 初始化页面init();// 监听元素的重叠度constidLoadingdocument.querySelector(#idLoading);constobnewIntersectionObserver(function(entries){constentryentries[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一般会触发两次。一次是目标元素刚刚进入视口(开始可见)另一次是完全离开视口(开始不可见)。letobnewIntersectionObserver(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% 可见时会触发回调函数(当只有一个参数时可以单独写一个数字比如00.51就表示与视口交叉百分值多少触发)。2、root属性和rootMargin属性很多时候目标元素不仅会随着窗口滚动还会在容器里面滚动(比如在iframe窗口里滚动)。容器内滚动也会影响目标元素的可见性参见阮一峰文章开始时的那张示意图。IntersectionObserver API支持容器内滚动。root属性指定目标元素所在的容器节点(即根元素)。注意容器元素必须是目标元素的祖先节点。letopts{root:document.querySelector(.container),rootMargin:500px 0px};letobservernewIntersectionObserver(callback,opts);上面代码中除了root属性还有rootMargin属性。后者定义根元素的margin用来扩展或缩小rootBounds这个矩形的大小从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法比如10px 20px 30px 40px表示 top、right、bottom和left四个方向的值。这样设置以后不管是窗口滚动或者容器内滚动只要目标元素可见性变化都会触发观察器。注意IntersectionObserver API是异步的不随着目标元素的滚动同步触发。规格写明IntersectionObserver的实现应该采用requestIdleCallback()即只有线程空闲下来才会执行观察器。这意味着这个观察器的优先级非常低只在其他任务执行完浏览器有了空闲才会执行。MDNIntersectionObserver接口(从属于Intersection Observer API)提供了一种异步观察目标元素与其祖先元素或顶级文档视口(viewport)交叉状态的方法。其祖先元素或视口被称为根(root)。当一个IntersectionObserver对象被创建时其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建则无法更改其配置所以一个给定的观察者对象只能用来监听可见区域的特定变化值然而你可以在同一个观察者对象中配置监听多个目标元素。