我的目标是如果用户进一步滚动到视频元素,则将位置更改为视频元素。我正在使用Intersection Observer API,因为我需要处理来自AdForm Banner / iFrame的页面滚动。
这是我的代码:
function createObserver() {
var observer;
var options = {
root: null,
rootMargin: "0px",
threshold: buildThresholdList()
};
observer = new IntersectionObserver(handleIntersect, options);
observer.observe(boxElement);
}
这是handleIntersect
函数:
function handleIntersect(entries, observer) {
entries.forEach(function(entry) {
if (entry.intersectionRatio > prevRatio) {
console.log("VIDEO IN");
p.style.position = "relative";
} else if(entry.intersectionRatio === 0 && scrolled === 1 ) {
console.log("VIDEO OUT");
p.style.position = "fixed";
}
});
}
这是我的codepen:https://codepen.io/alex18min/pen/gXXYJb
它适用于Chrome / Firefox / Edge和Android设备,但一般情况下不适用于iOS和Safari,似乎未检测到侦听器。
有人能帮我吗?先感谢您。
从iOS 12.2开始,Safari中本身支持Intersection Observer API。
我也很高兴地确认它尊重'实际'可见的视口 - 在那个时刻考虑工具栏。
因此,当您向上和向下滚动并且页面底部的工具栏进入视图或隐藏时 - 这是用于计算的新视口高度。