业务需要内容展示后日志打点,于是使用到了IntersectionObserver,实践中发现一个问题:如果内容出现在了可视区内,但是被其他元素遮挡住了,这时候仍然会打日志。
于是寻找解决方案,发现IntersectionObserver 还有一个v2版本,刚好能解决这个问题。
在v2版本中,IntersectionObserverEntry对象数组的每一项都包含一个isVisible属性,该属性标识当前元素是否可见。当设置opacity
, filter
, transform
或者被其他元素遮挡导致元素不可见时,该属性为false;
要开启该功能,需要在IntersectionObserver的配置参数中增加两个属性: trackVisibility
delay
{
trackVisibility: true,
delay: 100, // 最小100
}
下面是一个示例代码:
// 观察根元素和被观察目标元素的交叉情况
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isVisible && entry.isIntersecting) {
entry.target.innerHTML = "loaded";
// observer.unobserve(entry.target); // 停止观察目标元素
} else {
entry.target.innerHTML = "unloaded";
}
});
},
{
// rootMargin 默认值为” 0px 0px 0px 0px “,可用百分比,相当扩展根元素的对应宽高的百分比的值;
// 可以是负值。正数的时候代表在回调会更早触发,为负值代表回调更晚触发。 为了避免出现空白,可以设置为正值
rootMargin: "-40px 0px -40px 0px ",
// root 被观察对象的祖先元素,也就是根元素;默认是浏览器的视口窗口
root: document.querySelector("#root"),
// threshold一个包含阈值的数组,比如,[0, 0.25, 0服务器托管网.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时,会触发四次回调函数,
// 数组中的每个阈值可以是 0~1 之间的任意数值,默认值为[0],也就是开始进入,就会触发。
threshold: [1],
trackVisibility: true,
delay: 1000,
}
);
const pEl = document.querySelectorAll("p");
pEl.forEach((item) => observer.observe(item));
* {
margin: 0;
padding: 0;
}
div {
height: 400px;
overflow: auto;
box-shadow: 0 0 2px 0px rgba(255, 0, 0, 1);
margin-left: 10px;
}
p {
height: 50px;
width: 400px;
margin: 10px;
border: 1px solid darkse服务器托管网agreen;
/* opacity: 0.8; */
}
需要注意的是:该isVisible的判断比较保守,例如
filter: grayscale(0.01%)
或opacity: 0.99
设置也会isVisible为false。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net