如何防止 window.pageYOffset 在渲染时重置？

Question

我有一个反应组件，我想根据scroll事件更改 header 。 我正在附加一个事件处理程序并基于滚动 position 并切换显示 class 以隐藏 ro 显示所需的元素。

我遇到问题的地方是，当我的组件尝试重新渲染时，似乎出现了一些故障行为。 我在下面的代码框中有一个示例。

import React from "react";
import "./styles.css";

export default function App() {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const handleScroll = () => {
      console.log(window.pageYOffset);
      setScrollY(window.pageYOffset);
    };

    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, [setScrollY]);

  const scrolled = () => scrollY > 40;

  return (
    <div className="App">
      <div className={`header ${scrolled() ? "d-none" : ""}`}>Header Main</div>
      <div>
        <div className={`header-secondary ${scrolled() ? "d-none" : ""}`}>
          Header Secondary
        </div>
        <div className={`header-scrolled ${!scrolled() ? "d-none" : ""}`}>
          HeaderScrolled
        </div>

        <div>Scroll Position: {scrollY}</div>
        {[...Array(100)].map((e, i) => (
          <div>
            <div className={scrolled()}>{`SCROLLING`}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

我的代码沙箱： https://codesandbox.io/s/wizardly-saha-0oklr

如果您注意到我将隐藏/取消隐藏组件条件设置为 40 像素。 当您缓慢滚动 40 像素左右时，header 会弹回，并且由于某种原因， window.pageYOffset将重置为 0。我不知道这是为什么？

如果您滚动过去的速度足够快，那没关系，但在我切换显示 class 的位置附近会有一些奇怪的行为。

编辑：更新的示例实际上我需要做的是从Header Main到Header Secondary的平滑过渡。 我无法真正更改Header Main的样式，因为我不拥有该产品的那部分。

Answer 1

问题在于您的 header。 当您位于顶部时，header 会影响滚动体的高度，因为它是 position 相对的。 当您开始向下滚动时，它会固定并离开主体，因此不会受到影响。 当您滚动回顶部时，它会再次影响滚动高度。

所以有一些技巧可以解决这个问题。 给予 padding-top: 50px; 滚动元素并使用 header 始终固定将节省您。

.App {
  padding-top: 50px;
}


.header {
  width: 100%;
  height: 50px;
  background-color: teal;
  position: fixed;
  top: 0;
}

.header-scrolled {
  width: 100%;
  height: 50px;
  background-color: green;
  color: white;
  position: fixed;
  top: 0;
}

https://codesandbox.io/s/lingering-pine-puunf

Answer 2

我有两天完全相同的问题。 我实施的修复是在原始“导航”组件之外呈现“粘性导航”组件。 这样，原始导航仍将存在于顶部（但在可见的 window 上方，所以您永远不会知道），并且当您向下滚动时，会出现“粘性导航”。 由于原始导航始终存在并且不会更改 position，因此不会影响滚动 position 并在缓慢向上滚动时导致故障。