React scroll ( стороння библиотека)

Question

Как то попытаюсь сформулировать свою проблему. Может кто и поможет.

Насколько я понимаю, React не манипулирует напрямую DOM и я так же не могу обращаться к тому же body.

Соответственно мне нужна какая-то обертка для сайта или приложения (скажем App);

В мою задачу входит манипулировать Scroll-ом на странице (например во время открытия меню, отключить скролинг).

.app {
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
}

или

 .app {
    overflow-y: scroll;
    height: 100%;
    position:absolute;
    top: 0;
    left: 0;
    width: 100vw;
 }

Скролл появляется. Но есть но...

Я использую библиотеку react-scroll для плавного скролинга и прочего. Но как только я добавляю подобные стили для app - react-scroll больше не работает.

Вот ссылка на демонстрацию

Answer 1

Вот так можно сделать:

import "./styles.css";
import Header from "./Header/Header";
import AboutMe from "./About/About";
import { useEffect, useRef } from "react";
export default function App() {
  const app = useRef();

  useEffect(() => {
    app.current.style.overflowY = "hidden";
    app.current.style.height = "100%";
    app.current.style.position = "absolute";
    app.current.style.top = 0;
    app.current.style.left = 0;
    app.current.style.width = "100vw";
  }, [app]);

  return (
    <div className="app" ref={app}>
      <Header />
      <AboutMe />
    </div>
  );
}

БЛОГ НА HUSL

React scroll ( стороння библиотека)

Ответы (1 шт):