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

编程问答 2022-08-13

问题描述

我试图将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'),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>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

intersection-observerjavascriptreactjsreactjs