How to get scroll position in a div and set state in React

Question

I have a div which is scrollable inside. I want to get the scroll position of that div and set it to a state (which then controls my menu and its animations via css). I have tried to get the scroll position using the browswer window but this does not work as its inside a div that I am working with. At the moment my menu does correctly scroll inside the div but when I manually scroll inside the div using my mouse it does not change the menu.

How would I do this?

App.js:

import "./App.scss";

import { useState, useEffect } from 'react';



function App() {

  const [menuIndex, setMenuIndex] = useState(0);
  
  const menuIndexHandler = (index) => {
    setMenuIndex(index)
  }

  return (
    <div className="App">
      <div className="innerBox">
        <div className="menu">
          <div className="spaceHorizontal">

          </div>
   
          <a href="#summery">
          <div className={`menuItem  ${(menuIndex == 0) ? ' menuOpen' : ' menuClosed'} `} onClick={() =>menuIndexHandler(0)} >
            <label htmlFor="Summery Menu Label">             
             <div className="menuOpenAnimation"><a className="menuLabel">Summery</a></div>
            </label>
          </div>
          </a>
          <a href="#workhistory">
          <div className={`menuItem  ${(menuIndex == 1) ? ' menuOpen' : ' menuClosed'} `} onClick={() =>menuIndexHandler(1)}>
            <label htmlFor="Work History Menu Label">
              
              <div className="menuOpenAnimation"><a className="menuLabel">Work History </a></div>
            </label>
          </div>
          </a>
          <a href="#certifications">
          <div className={`menuItem  ${(menuIndex == 2) ? ' menuOpen' : ' menuClosed'} `} onClick={() =>menuIndexHandler(2)}>
            <label htmlFor="Certification Menu Label">
              
              <div className="menuOpenAnimation"><a className="menuLabel">Certifications</a></div>
            </label>
          </div>
          </a>
          <a href="#education">
          <div className={`menuItem  ${(menuIndex == 3) ? ' menuOpen' : ' menuClosed'} `} onClick={() =>menuIndexHandler(3)}>
            <label htmlFor="Education Menu Label">
              
              <div className="menuOpenAnimation"><a className="menuLabel">Education</a></div>
            </label>
          </div>
          </a>
        </div>
        <div className="content">
        
        <div className="spaceHorizontal">
            <h1>Digital Resume</h1>
       
        </div>
 
          <div className="contentScrollDiv">
            <div id="summery" className="contentSubSection">
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            </div>
            <div className="contentSubSection">
              <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            </div>
            <div className="contentSubSection">
              <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            </div>
            <div className="contentSubSection">
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            <p> Placeholder Text </p>
            </div>
          </div>
        </div>
      </div>
 
    </div>
  );
}

export default App;

App.scss:

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

.App {
  background-color: #202020;
  height: 100vh;
  width: 100vw;
  display: flex;
  font-family: 'Raleway', sans-serif;
}

.backgroundParticles{
  z-index: 1;
}

.innerBox {
  width: 900px;
  height: 700px; 
  margin: auto;
  display: flex;
  flex-direction: row;
  z-index: 2;
}

.spaceHorizontal{
  height: 50px;
  padding-bottom: 25px;
}



.menu {
  background-color: #3F485F;
  height: 600px;
  width: 200px;
  display: flex;
  flex-direction: column;
  border-radius: 25px 0px 0px 25px;  
  
}

.menuItem {
  height: 40px;
  width: 164px;

  border-bottom: 1px solid white;
  
 
}

.menuLabel{
  z-index: 3;
  color: white;
  margin-top: 15px;
  padding-left: 5px;
}

.menuOpenAnimation{
  z-index: 2;
  width: 164px;
  height: 40px;
  position: absolute;
}

@keyframes menuOpenAnimation{
  from {background-color: rgb(131, 197, 190);
        width: 0px;}
  to {background-color: #BC7528;
       width: 164px;}
}

.menuOpen {
  animation-name: menuOpenAnimation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;  
  animation-timing-function: ease-out;
  background-color: #49B095;
}




.content {
  background-color: #F8F7F1;
  height: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0px 25px 25px 0px; 
}

h1 {
  text-align: center;
}

hr {
  width: 100%;
}





.contentScrollDiv {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding-inline: 25px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.contentScrollDiv::-webkit-scrollbar {
  display: none;
}

a {
  color: black;
  text-decoration: none;
}

Thanks for the help.

Answer 1

I hope this package would be helpful react-perfect-scrollbar https://www.npmjs.com/package/react-perfect-scrollbar thanks :)