Question

TL，DR：

我不在乎目标容器有多少可见，我只想知道目标容器何时从视口顶部（窗口）到达特定偏移量。我应该坚持使用旧的滚动事件，还是可以使用Intersection观察器完成此操作？

长话短说

对于一个项目，我需要创建一个垂直滚动视差效果（在大屏幕上查看时，如this page所示）。

视差动画需要检测目标容器何时到达距视口顶部的特定偏移处。并且它需要知道滚动方向。

我发现这个问题可以解释visibilty percentage can be used to determine the scoll direction如何解决第二个问题。

所以我的问题是：当我的目标容器到达视口顶部特定的偏移量时，我可以使用Intersection观察器触发回调吗？

在伪代码中，我需要这样的东西：

var observer = new IntersectionObserver(offsetReached, {root: null});

function offsetReached(entries, observer) {
  entries.forEach(entry => {
    if (entry.offsetFromTop == '200px') {
      entry.target.classList.add('container--fixed');
    }
  });
}

observer.observe('.container');

Answer 1

Intersectionobserver的目的是检测元素的一部分何时可见，如果您要注意offSet，最好的选择是使用老式的scroll事件和getBoundingClientRect()您需要注意的元素。

Answer 2

在 rootMargin 上使用 IntersectionObserver 选项：

var observer = new IntersectionObserver(offsetReached, {rootMargin: '-200px'});

<块引用>

在执行相交测试之前，由 rootMargin 表示的矩形的每条边都添加到根元素的边界框中的相应边上。 (MDN Web Docs: Intersection)Observer.rootMargin)

可以使用交叉口观察器在目标的特定偏移顶部进行计算/触发吗？

2 个答案: