IntersectionObserver iOS 和 Safari答案

【问题标题】：IntersectionObserver iOS & SafariIntersectionObserver iOS 和 Safari
【发布时间】：2018-04-30 10:01:41
【问题描述】：

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

有人可以帮助我吗？提前谢谢你。

【问题讨论】：

IntersectionObserver 根本不支持 Safari, iOS Safari, IE11。您需要使用 polyfill 在这些浏览器中支持此功能。您希望在任何交叉点观察器功能之前加载此 polyfill。
我已经在头部声明了 polyfill，如下所示：
在我的浏览器上尝试了您的polyfill url，但没有成功。相反，您可以手动包含the file。
更大的问题是，由于滚动时自动隐藏工具栏，polygoll 无法适应 virwport 大小的变化。这样的项目将在 virwport 底部大约 70 像素处，甚至在它们被检测到 0% 之前

标签： javascript html scroll banner intersection-observer

【解决方案1】：

自 iOS 12.2 起，Safari 原生支持 Intersection Observer API。

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

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

【讨论】：