Como se puede ver en el código a continuación, hay un elemento div con la clase Parent. El div principal tiene un desbordamiento en la dirección x. Dentro del elemento de la clase Parent hay elementos de la clase BarBody alineados en dirección horizontal.

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

barra.css

 .Parent{ display: flex; flex-direction: row; gap: 80px; overflow:auto; } .BarBody{ height: 100px; width: 50px; flex-shrink: 0; background-color: orange; }

Estoy tratando de consolar el valor de desplazamiento cuando los elementos de la clase BarBody se desplazan de izquierda a derecha o viceversa. Intenté usar window.scrollX pero siempre está configurado en 0 .

Por favor, guíame sobre cómo podría consolar el valor de scrollX. Déjame saber si se requiere más información.