Question

我试图将IntersectionObserver与React一起使用。我想做的是让div的底部25％出现时运行一个函数。

我创建了一个createObserver函数并将其包装在useEffect中，以便interSection观察者在组件安装之前不会将值分配给目标或根。

useEffect(() => {
    createObserver();
  }, []);

然后我创建了Intersection观察器函数，为它提供了一个要监视的目标以及一个将目标与之进行比较的根

const createObserver = () => {
    let options = {
      root: document.querySelector('.home'),
      rootMargin: '0px',
      threshold: 0.75
    }

    let target = document.querySelector("#align");

    let observer = new IntersectionObserver(() => {
        alert('helloWorld');
    }, options);

    observer.observe(target);
  }

期望的结果是，当显示具有align id的div的底部75％时，该函数应向helloWorld发出警报。相反，它会立即通知helloWorld组件已安装DOM，就是这样。

如果您想自己测试一下，这是一个最小的可复制示例：

const Home = () => {
   const createObserver = () => {
    let options = {
      root: document.querySelector('.home'),
      rootMargin: '0px',
      threshold: 0.75
    }
    let target = document.querySelector("#align");
    let observer = new IntersectionObserver(() => {
     alert('helloWorld')
    }, options);
    observer.observe(target);
  }

  useEffect(() => {
    createObserver();
  }, []);  

  return (
    <div className="home  col-sm-12">
      <div className="row" id="align"></div>
    </div>
  );
};

满足相交条件时，IntersectionObserver不执行功能

0 个答案: