做wish选品参考什么网站,军事新闻最新头条,比较好的开源cms系统,福州网站制作网站常见场景#xff1a; 滚动条滚动到底部时加载数据#xff0c;如果监听滚动事件#xff0c;会造成不必要的浪费。如频繁滚动但未达底部。可以建立观察者#xff0c;监听loading标识元素到达视口某位置后再加载数据。
步骤
创建一个新的 IntersectionObserver 对象#xf…常见场景 滚动条滚动到底部时加载数据如果监听滚动事件会造成不必要的浪费。如频繁滚动但未达底部。可以建立观察者监听loading标识元素到达视口某位置后再加载数据。
步骤
创建一个新的 IntersectionObserver 对象当其监听到目标元素的可见部分的比例超过了一个或多个阈值threshold时会执行指定的回调函数。
创建观察者new IntersectionObserver()接受两个参数 参数1回调函数 参数entries为观察的所有元素的集合。被观察元素的isIntersecting属性为true时表示已超过重叠阈值。参数2构造器 root为与被观察元素重叠的元素默认为null表示顶级文档视口。thresholds表示阈值小数表示百分比即重叠比例默认为0。 观察元素IntersectionObserver.observe()一个观察者可以观察多个元素当观察多个元素时参数1中的entries也为多个。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleScroll Loading/titlestyle.content {height: 800px;overflow-y: scroll;padding: 20px;border: 1px solid #333;}.box {width: 100%;height: 400px;background-color: #bfd;margin-bottom: 30px;}#loading {display: block;text-align: center;padding: 10px;background-color: #f1f1f1;margin-top: 10px;}.hidden {display: none;}/style
/headbodydiv classcontentdiv classbox1/divdiv classbox1/divdiv classbox1/divdiv classbox1/divdiv idloading classhiddenLoading.../div/divscript// 建立观察者const loading document.getElementById(loading);let ob new IntersectionObserver(function (entries) {let loading entries[0]console.log(loading.isIntersecting);if (loading.isIntersecting) {console.log(加载更多);}}, {thresholds: 0.5})ob.observe(loading);/script
/body/html
