IntersectionObserver 在 Safari 或 iOS 中不起作用

Question

我有一段代码，根据元素是从顶部还是底部滚动进入或退出视口，向元素添加不同的 css 类。

它使用Intersection Observer是因为它应该比scroll事件更好地处理大量元素。

但是，我在使用此代码时遇到了两个问题：

1. 它在 Safari（最新版本）中不起作用
2. 它不适用于移动 Apple 设备

这很奇怪，因为 IntersectionObserver 应该可以在 Safari 甚至 iOS 上的移动浏览器上正常工作。

您可以在 jsFiddle 上找到代码或在此处查看代码段：

const config = {
  // Add root here so rootBounds in entry object is not null
  root: document,
  // Margin to when element should take action
  rootMargin: '-50px 0px',
  // Callback will be fired 30 times during intersection 
  threshold: [...Array(30).keys()].map(x => x / 29)
};

let observer = new IntersectionObserver(function(entries, observer) {

  entries.forEach((entry, index) => {
    const element = entry.target;

    // Get root element (document) coords
    const rootTop = entry.rootBounds.top;
    const rootBottom = entry.rootBounds.height;

    // Get div coords
    const topBound = entry.boundingClientRect.top - 50; // margin in config
    const bottomBound = entry.boundingClientRect.bottom;

    let className;

    // Do calculations to get class names
    if (topBound < rootTop && bottomBound < rootTop) {
      className = "outview-top";
    } else if (topBound > rootBottom) {
      className = "outview-bottom";
    } else if (topBound < rootBottom && bottomBound > rootBottom) {
      className = "inview-bottom";
    } else if (topBound < rootTop && bottomBound > rootTop) {
      className = "inview-top";
    }
    element.setAttribute('data-view', className);

  });
}, config);

const viewbox = document.querySelectorAll('.viewme');
viewbox.forEach(image => {
  observer.observe(image);
});

body {
  text-align: center;
}

.margins {
  position: fixed;
  top: 50px;
  bottom: 50px;
  border-top: 2px dashed;
  border-bottom: 2px dashed;
  z-index: 1;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hi {
  padding: 40vh 0;
  background: lightgray;
}

.box {
  width: 23%;
  min-width: 100px;
  height: 40vh;
  margin-bottom: 10px;
  background: lightblue;
  display: inline-block;
}

.viewme {
  transition: all .3s ease;
}

.viewme[data-view='inview-top'],
.viewme[data-view='inview-bottom'] {
  opacity: 1;
  transform: translateY(0);
}

.viewme[data-view='outview-top'] {
  opacity: 0;
  transform: translateY(-20px);
}

.viewme[data-view='outview-bottom'] {
  opacity: 0;
  transform: translateY(20px);
}

<p class="hi">Scroll down and back up</p>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>

<div class='margins'>

</div>

到目前为止，关于可能导致这些问题的原因，我有两个提示：

1. 在 Safari 开发者控制台中，它说Type error我的 JS 代码中有第 10 行到第 38 行
2. 我注意到其他定义的脚本root: document在 iOS 上不起作用。相反，它们在定义root: null. 但是，我无法使用，root: null因为rootBounds. 我试图将我的 html 包装在一个 div 中，并将 div 的 id 设置为根元素，但这不起作用（请参阅此处）。

非常感谢解决这两个问题的任何帮助。不过请注意，上面的代码不是我写的，也不是很懂。

Answer 1

虽然我无法确定该错误的确切原因，但我确实有一个解决方案：

尝试使用document.bodyas和 定义尺寸和滚动root行为。htmlbody

我认为这document不仅仅是一个简单的 html 节点（我也尝试使用document.documentElement但没有成功）以及 Safari 如何为其初始化盒子模型。

无论如何，这是更新后的工作小提琴https://jsfiddle.net/gion_13/okrcgejt/8/以及 iOS 和 Mac Safari 上测试的截屏视频：

Answer 2

我找不到你的问题的解决方案，但当我将阈值从 1 降低到 0.9 时，我的问题得到了解决。当它设置为 1 时，路口观察器在 Safari 中不起作用。但它在 Firefox 和 Chrome 中运行得很好。

const options={
    root:null,
    rootMargin:'0px',
    threshold:0.9
 };

无论 root 设置为 null 还是 document.body，它都有效。由于某种原因，当我请求 Safari 中的 Intersection Observer 仅在对象 100% 完全可见时触发时，它无法工作，但它可以在 90% 的情况下工作。我希望这对那里的人有帮助。