我的目标是如果用户进一步滚动到视频元素,则将位置更改为视频元素。我使用的是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);
}
Run Code Online (Sandbox Code Playgroud)
这是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";
}
});
}
Run Code Online (Sandbox Code Playgroud)
这是我的代码笔:https ://codepen.io/alex18min/pen/gXXYJb
它可以在Chrome / Firefox / Edge和Android设备上完美运行,但通常不能在iOS和Safari上运行,似乎未检测到监听器。
有人能帮我吗?先感谢您。