Question

如果用户进一步滚动到视频元素，我的目标是将位置更改为视频元素。我使用的是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"; 
    }
  });
}

这是我的代码：https://codepen.io/alex18min/pen/gXXYJb

它在Chrome / Firefox / Edge和Android设备上运行良好，但一般情况下不适用于iOS和Safari，似乎未检测到侦听器。

有人能帮助我吗？提前谢谢。

Answer 1

自iOS 12.2起，Safari本身就支持Intersection Observer API。

我也很高兴确认它尊重“实际”可见视口-当时考虑了工具栏。

因此，当您上下滚动时，页面底部的工具栏就会显示或隐藏起来-这是您用于计算的新视口高度。

IntersectionObserver iOS＆amp;苹果浏览器

1 个答案: