reactjs Next.js：如何在重载时恢复滚动状态

jq6vz3qz 于 2023-02-12 发布在 React

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

描述

我正在为我已经实现的一些东西而挣扎，它基本上是一个依赖于监视其scrollYOffset状态的useEffect的粘性头，但是一旦我重新加载页面，它就不会识别，直到我再次滚动。

屏幕截图

重新加载

后滚动

后

源代码

const Header = () => {
  const [isSticky, setSticky] = useState(false)

  useSSRLayoutEffect(() => {
    window.addEventListener(
      'scroll',
      () => {
        if (window.pageYOffset > 54) {
          setSticky(true)
        } else {
          setSticky(false)
        }
      },
      { passive: true }
    )
  }, [])

  return (
    <>
      <header
        className={cx(
          'fixed top-0 z-10 flex w-full flex-col items-center justify-center transition-all',
          isSticky
            ? 'bg-black bg-opacity-60 backdrop-blur'
            : 'bg-transparent pt-4'
        )}
      >
        ...
      </header>
    </>
  )
}

export default Header

reactjs

来源：https://stackoverflow.com/questions/75400376/next-js-how-to-restore-scroll-state-on-reload

1条答案

按热度按时间

iovurdzv1#

在挂载组件时，您可能还需要调用传递给scroll事件处理程序的函数。
最简单的方法是将逻辑抽象为一个单独的函数，并在滚动时和效果回调运行时调用它：

useSSRLayoutEffect(() => {
  const onScroll = () => {
    if (window.pageYOffset > 54) {
      setSticky(true);
    } else {
      setSticky(false);
    }
  };

  // Run logic when scroll event is fired
  window.addEventListener('scroll', () => onScroll(), { passive: true });

  // Run logic when component is ready
  onScroll();
}, []);

但是，如果必须等待浏览器先运行布局以确保获得最终滚动位置，则需要调用useEffect中的函数：

const onScroll = () => {
  if (window.pageYOffset > 54) {
    setSticky(true);
  } else {
    setSticky(false);
  }
};

useSSRLayoutEffect(() => {
  // Run logic when scroll event is fired
  window.addEventListener('scroll', () => onScroll(), { passive: true });
}, []);

useEffect(() => {
  // Run logic when layout is finalized
  onScroll();
});

赞(0）回复(0）举报 2023-02-12

我来回答

reactjs Next.js：如何在重载时恢复滚动状态

描述

屏幕截图

源代码

1条答案

相关问题

热门标签

最新问答