交叉口观察者仅观察我组件的底部，并且仅在所有组件消失后才触发

Question

我将相对于视口的另一侧观察组件的顶侧。目的是在可见20％的组件时触发回调。

我在developer.mozilla.org上看到默认情况下，API还会从根目录的顶部观察目标。您可以在此页面上看到一个示例：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

因此，我决定80％的顶级组件何时离开视口以触发回调。这是我的摘录：

let options = {  
            threshold: 0.8
        }
this.observer = new IntersectionObserver(()=> console.log("active intersection!"));
this.observer.observe(this.accueil.current.top.current, options);

但是到目前为止，我的应用程序只欣赏根部底部边界的交点。

此外，this.accueilTop.current是传递给父级的子级，在其中我通过将子级ref传输到父级组件来实现了intersectionObserver。

裁判在此处转移的代码段：

{React.createRef() ...}

父母：

  <Accueil ref={this.accueil} />

孩子：

 <div ref={this.top}/>

就这样

任何提示都会很棒， 谢谢

Answer 1

根据documentation .observe()只接受一个参数，它是要观察的元素。您可能打算将options对象传递给IntersectionObserver的构造函数的调用，而不是传递给.observe()：

let options = {threshold: 0.2};

this.observer = new IntersectionObserver(
    () => console.log("active intersection!"), 
    // options must go here
    options,
);

this.observer.observe(this.accueil.current.top.current);

如果您的目标是在80％的元素离开视口时触发回调，则实际上必须将threshold设置为0.2。这意味着当您的元素的20％可见（与80％的元素不可见）相同时，将调用回调。

Answer 2

您可以使用 entry.boundingClientRect 来告诉您的底部是否在视口中。如果底部小于 0，则不在视口中，如果底部大于窗口大小，则不在视口中。

当它在视口中时，每个滚动也必须进行阈值检查，每 10% 切片。

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => { 
        const bcr = entry.boundingClientRect;
        const isBottomVisible = (bcr.bottom < window.innerHeight) && bcr.bottom;
        console.log(bcr.top, bcr.bottom, window.innerHeight, {isBottomVisible});
      });
    }, {threshold: Array(11).fill().map( (_, i) => i*.1)});
    observer.observe(this._templateContainer );