Задать вопрос
chincharovpc

chincharovpc

Ответы пользователя по тегу React

  • Постоянное отслеживание времени?

    chincharovpc
    @chincharovpc
    Думаю, нужно использовать setInterval
    const [dateTime, setDateTime] = useState(new Date());
    useEffect(() => {
        const id = setInterval(() => setDateTime(new Date()), 1000);
        return () => {
            clearInterval(id);
        }
    }, []);
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать так, чтобы прокрутка div и прокрутка body работали одновременно, несмотря на длину содержимого?

    chincharovpc
    @chincharovpc
    Если я правильно тебя понял, то вот
    import { Fragment, useEffect, useRef, useState } from "react";
import "./styles.css";
export default function App() {
  const firstDivRef = useRef();
  const [windowScroll, setWindowScroll] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      if (windowScroll === 0) {
        setWindowScroll(window.scrollY);
      }

      firstDivRef.current.scrollTop =
        firstDivRef.current.scrollTop + (window.scrollY - windowScroll);

      setWindowScroll(window.scrollY);
    };

    window.removeEventListener("scroll", onScroll);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [windowScroll]);

  return (
    <Fragment>
      <div className="header"></div>
      <div
        className="App"
        style={{
          display: "flex",
          marginTop: "100px"
        }}
      >
        <div
          ref={firstDivRef}
          style={{
            height: "600px",
            overflow: "scroll",
            backgroundColor: "#FFDAB9",
            position: "sticky",
            top: "100px"
          }}
        >
          <div>
            <ul className="first-scroll">
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
            </ul>
          </div>
        </div>

        <div
          style={{
            backgroundColor: "#EEE8AA"
          }}
        >
          <div>
            <ul className="first-scroll">
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
              <li>Scroll text</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="about-us"></div>
      <div className="footer"></div>
    </Fragment>
  );
}
    Ответ написан
    1 комментарий
    1 комментарий