React 标头组件中第一次滚动时的抖动行为

Question

描述

我在基于 React 的 next.js Web 应用程序中遇到了标头组件问题。在页面初始加载时，当我第一次滚动时，在标题按预期隐藏之前会出现明显的抖动行为。一旦发生这种最初的抖动行为，标题对于后续滚动来说表现得非常好。

function Header() {
    const [mounted, setMounted] = useState(false);
    const { theme } = useTheme();
    const [prevScrollPos, setPrevScrollPos] = useState(0);
    const [visible, setVisible] = useState(true);

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollPos = window.scrollY;
            setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 200);
            setPrevScrollPos(currentScrollPos);
        };

        window.addEventListener("scroll", handleScroll);

        return () => window.removeEventListener("scroll", handleScroll);
    }, [prevScrollPos]);

    useEffect(() => {
        setMounted(true);
    }, []);

    if (!mounted) {
        return null;
    }

    return (
        <>
            {(theme === 'light' || theme === 'undefined' || theme === null) && visible && <LightHeader />}
            {theme === 'dark' && visible && <DarkHeader />}
        </>
    )
}

（我正在使用下一个主题进行主题切换。安装逻辑是为了减轻水合错误）

我怀疑我可能在这里错过了一个关键的 React 概念或最佳实践。有人可以提供有关可能导致第一个卷轴上出现这种紧张行为的见解以及我如何解决它吗？在这种情况下，去抖动会有帮助吗？另外，这个问题是否与 React Snapshot 有关？

任何帮助或指导将不胜感激！谢谢你。

---

警告建议我阅读滚动锚定

Answer 1

问题是由于动态添加和删除标题组件，滚动无法锚定。我正在渲染标题组件或 null，这会影响文档的高度。

我通过使用可见性来缓解此问题：可见和隐藏，使其仍在文档流中但隐藏。

注意：我仍然不知道为什么问题在最初的抖动后会自行解决。是不是因为文档保存了页眉的高度？