javascript - IntersectionObserver 无法在 Safari 或 iOS 中工作

Question

我有一段代码，根据元素是否从顶部或底部滚动到视口(viewport)或从视口(viewport)滚出，向元素添加不同的 css 类。

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

但是，我在这段代码中遇到了两个问题:

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

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

您可以find the code on 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 开发者控制台中，它显示我的 JS 代码中第 10 行和第 38 行之间存在类型错误
2. 我注意到定义 root: document 的其他脚本在 iOS 上不起作用。相反，它们在定义 root: null 时起作用。但是，由于 rootBounds，我无法使用 root: null。我尝试将我的 html 包装在 div 中并将 div 的 id 设置为根元素，但这不起作用( see here )。

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

Answer 1

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

尝试使用 document.body 作为 root 并为 html 和 body 定义大小和滚动行为.

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

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