Как предотвратить сброс window.pageYOffset при рендеринге?

Question

У меня есть компонент реакции, в котором я хочу изменить заголовок на основе события scroll. Я подключаю обработчик событий и на основе положения прокрутки и переключаю класс отображения, чтобы скрыть и показать желаемые элементы. повторить рендеринг. У меня есть пример в codeandbox ниже.

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 пикселей, заголовок возвращается обратно, и по какой-то причине window.pageYOffset сбрасывается до 0. Я не могу понять, почему это так?

Если вы прокручиваете достаточно быстро, этого не происходит имеет значение, но прямо там, где я переключаю класс отображения, наблюдается какое-то странное поведение.

EDIT : обновленный пример По сути, мне нужно сделать небольшой переход от Header Main к Header Secondary. Я не могу изменить стиль Header Main, потому что эта часть продукта мне не принадлежит.

Answer 1

Проблема в твоей шапке. Когда вы находитесь наверху, заголовок влияет на высоту тела прокрутки, потому что он является относительным. Когда вы начинаете прокручивать вниз, он фиксируется и покидает тело, поэтому не влияет. Когда вы прокручиваете назад вверх, это снова влияет на высоту прокрутки.

Итак, есть несколько уловок для решения этой проблемы. Подача padding-top: 50px; для прокрутки элемента и использования всегда фиксированного заголовка спасет вас.

.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