当 React 组件或元素的顶部边框与视口重合时显示它

Question

如何在 React 中显示到达特定滚动位置的元素？

问题： 我正在开发一个 React 项目，在该项目中，当元素从视口顶部到达特定滚动位置时，我需要显示该元素。该元素最初应该是隐藏的，但是当用户滚动并且元素到达距顶部一定距离时，它应该变得可见。

这是我想要实现的行为的更详细描述：

元素仅在从视口顶部滚动超过一定边距后才应显示 在到达此滚动位置之前，该元素应保持隐藏状态。

假设一个页面上总共有 8 个组件。 但最初，标题是隐藏的，我希望当用户滚动并到达标题组件应该存在的 pt 时（如果它显示为块），则只需将显示属性切换为块并使其作为 header 粘在顶部.

根据显示：阻止和隐藏。我正在添加一些动画，使其淡入和淡出。

我尝试使用 Intersection Observer 并使用 root-margin 但它不起作用。

我使用的解决方法：

我观察了页面的第二个组成部分。因为我确信最初它会在视口上可见，当它通过第二个组件时，我显示了第三个组件。

在此处添加代码沙箱链接。另外，我想在用户滚动到视口时实现组件的延迟加载。

codesandbox 链接

Answer 1

这里有一个简单的方法：

import React, { useEffect, useRef, useState } from 'react';

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      {
        root: null,
        threshold: 0,
        rootMargin: '-50% 0px 0px 0px' // Adjust this to trigger at the top
      }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [ref]);

  return (
    <div ref={ref} className={isVisible ? 'visible' : 'hidden'}>
      {/* Your component content here */}
    </div>
  );
};

export default MyComponent;

这里发生了什么： useRef：我们创建对要观察的元素的引用。 useEffect：我们设置 IntersectionObserver 来观察我们的元素。 可见性切换：当元素与视口相交时，我们将其设置为可见。 只需插入组件内容并根据需要调整 rootMargin 即可在可见性触发时进行微调。这使得您的组件在您想要的时候正确显示！