How can I make div scroll and body scroll work at the same time despite content length?

Question

JavaScript

I have div scrolling and body scrolling in sync. But I need more help to scroll the div and body up and down at the same time, even though the div will scroll slowly. As on this site https://alakel.kg If you notice, the sidebar scrolls slowly, but simultaneously with the main scroll. Here is my code at https://codesandbox.io/s/spring-cdn-i875c?file=/sr... . I will be glad if you help me.

import { Fragment, useEffect, useRef, useState } from "react";
import "./styles.css";
export default function App() {
  const firstDivRef = useRef();

  const [scrollTop, setScrollTop] = useState(0);
  const [disableBodyScroll, setDisableBodyScroll] = useState(false);
  const handleScrollFirst = (scroll) => {
    setScrollTop(scroll.target.scrollTop);
  };

  useEffect(() => {
    if (firstDivRef.current && !disableBodyScroll) {
      firstDivRef.current.scrollTop = scrollTop;
    }
    if (disableBodyScroll) {
      window.scrollTo(0, scrollTop);
    }
  }, [firstDivRef, scrollTop, disableBodyScroll]);

  useEffect(() => {
    const onScroll = () => {
      console.log(disableBodyScroll, window.scrollY);

      if (!disableBodyScroll) {
        setScrollTop(window.scrollY);
      }
    };
    // clean up code
    window.removeEventListener("scroll", onScroll);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [disableBodyScroll]);

  return (
    <Fragment>
    <div className="header"></div>
    <div
      className="App"
      style={{
        display: "flex",
        marginTop: "100px"
      }}>
   
      <div
        onMouseEnter={() => setDisableBodyScroll(true)}
        onMouseLeave={() => setDisableBodyScroll(false)}
        onScroll={handleScrollFirst}
        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>
  );
}

And css code

.first-scroll{
  list-style: none;
}

.first-scroll li{
  padding: 20px 40px;
  margin: 20px 0;
  border: 1px solid red;
}

.header{
  width: 100%;
  height: 100px;
  background-color: blueviolet;
  position: fixed;
  top: 0;
  z-index: 10;
}

.footer{
  width: 100%;
  height: 200px;
  background-color: darkblue;
}

.about-us{
  width: 100%;
  height: 100px;
  background-color: rgb(0, 139, 132);
}

Answer 1

If I understand you correctly, then

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>
  );
}