6

我的目标是在用户进一步滚动到视频元素时将位置更改为视频元素。我正在使用 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 上一般不运行，似乎未检测到侦听器。

有人能帮我吗？先感谢您。

4

1 回答 1

2

从iOS 12.2开始，Safari 原生支持 Intersection Observer API。

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

因此，当您向上和向下滚动并且页面底部的工具栏进入视图或隐藏时 - 这就是您用于计算的新视口高度。

于 2019-04-19T20:26:31.810 回答