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

---

静态效果

---

html

<div>
    <div id="idBox" class="box"></div>

    <div id="idLoading" class="loading">加载更多</div>
</div>

---

JavaScript

function init() {
    let elStr = '<div class="grid_box">';

    for (let i = 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();

// 监听元素的重叠度
const idLoading = document.querySelector('#idLoading');
const ob = new IntersectionObserver(
    function (entries) {
        const entry = 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一般会触发两次。一次是目标元素刚刚进入视口(开始可见)，另一次是完全离开视口(开始不可见)。

let ob = new IntersectionObserver(
	entries => {
		console.log(entries);
	}
);

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

---

option对象

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

---

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

new IntersectionObserver(
	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属性指定目标元素所在的容器节点(即根元素)。注意，容器元素必须是目标元素的祖先节点。

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

let observer = new IntersectionObserver(
	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被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。