javascript 使用React中的IntersectionObserver在viewport中观察一个元素的入口

eoigrqb6 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(120)

我正在使用一个功能来动画元素时进入视口，但我想改变它，使它只会做一次...我/不知道如何/在哪里编辑来完成这一点...任何建议？

function useIsInViewport(ref) {
  const [isIntersecting, setIsIntersecting] = useState(false);

  const observer = useMemo(
    () =>
      new IntersectionObserver(([entry]) =>
        setIsIntersecting(entry.isIntersecting),
      ),
    [],
  );

  useEffect(() => {
    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [ref, observer]);

  return isIntersecting;
}

在第页中，我使用const进行设置：

const ref1 = useRef(null);
const isInViewport1 = useIsInViewport(ref1);

然后在元素上设置一个类：

${isInViewport1 && "fadeInDown"}

JavaScript

来源：https://stackoverflow.com/questions/73673057/observe-an-elements-entry-in-viewport-once-with-intersectionobserver-in-react

1条答案

按热度按时间

ttp71kqs1#

你需要在第一次迭代后调用observer.unobserve(entry.target)。在你的特定情况下，如下所示：

function useIsInViewport(ref) {
  const [isIntersecting, setIsIntersecting] = useState(false);

  const observer = useMemo(
    () =>
      new IntersectionObserver(([entry]) => {
        setIsIntersecting(entry.isIntersecting);
        observer.unobserve(entry.target); // line I added
      }),
    []
  );

  useEffect(() => {
    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [ref, observer]);

  return isIntersecting;
}

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 使用React中的IntersectionObserver在viewport中观察一个元素的入口

1条答案

相关问题

热门标签

最新问答