image slider div's horizontal scrolled value gettting in react js

February 4, 2023

I am making a image slider in react.js. made images div . overflow scroll. I want the current scrollbar value of the images div, like window.scrollY, for checking radio button when the scroll value is coming particular position.

function Events() {
  const images = [
    "https://picsum.photos/id/0/5000/3333",
    "https://picsum.photos/id/1/5000/3333",
    "https://picsum.photos/id/2/5000/3333",
    "https://picsum.photos/id/3/5000/3333",
    "https://picsum.photos/id/4/5000/3333",
    "https://picsum.photos/id/5/5000/3333"
  ]
  const [scrolled,setScrolled] = useState(1)
  const events2 = document.querySelector("#images")
const slide = () =>{
  if(events2.scrollLeft > 100){
  console.log("hi")
  }
}

return (
    <div className='events' id='events' >

      <div className='images' id="images" onScroll={slide}>
        {images.map((obj) => {
          return (
            <div className="image">
              <img src={obj} alt="NETWORK ERROR" draggable="false" />
            </div>
          )
        })}
      </div>
      <div className="radio">

        <input type="radio" name='img' defaultChecked />
        <input type="radio" name='img' />
        <input type="radio" name='img' />
        <input type="radio" name='img' />
        <input type="radio" name='img' />
      </div>
    </div>
  )

I am used console.log("hi") for testing. but it is not working. And I used scrollLeft for getting vertical value of the images div. not working why?