As one could see in the code below there is a div element with class Parent.The Parent div has a overflow in the x direction. Inside the Parent class element there are BarBody class elements aligned in horizontal direction.

Bar.js

const Bar = (props) => {
    
     useEffect(() => {
    
        let barParent = document.querySelector('div.Parent');
        
        barParent.addEventListener("scroll", function () {

            let scrollPosition = Math.ceil(window.scrollX);
            console.log("scroll  "+ scrollPosition);

                  })
    }, [])

    let barArray = [];

    for (let i = 0; i < 200; i++) {
        barArray.push(<div className='BarBody'></div>);
    }


    return (
        <div className='Parent'>
            {barArray}
        </div>
    )
}

Bar.css

.Parent{
    display: flex;
    flex-direction: row;
    gap: 80px;
    overflow:auto;

}

.BarBody{
    height: 100px;
    width: 50px;
    flex-shrink: 0;
    background-color: orange;
}

I am trying to console the scroll value when BarBody class elements are scrolled from left to right or vice versa. I tried using window.scrollX but it is always set to 0.

Please guide me how I could console the scrollX value. Let me know if more information is required.