为何div内部存在滚动条时window.scrollX无法获取正确滚动值？

window.scrollX 只能获取浏览器窗口（window视口）本身的横向滚动距离。你当前的滚动条是加在.Parent容器上的，页面整体没有产生横向滚动，所以读window的滚动值会一直返回0。

你已经把scroll事件绑定在了.Parent元素上，直接读取这个DOM元素自身的scrollLeft属性，就能拿到容器内部的横向滚动偏移值。
修正后的组件代码如下：

const Bar = (props) => {
    
     useEffect(() => {
        const barParent = document.querySelector('div.Parent');
        const onContainerScroll = () => {
            // 读取滚动容器自身的横向偏移量
            const scrollPosition = Math.ceil(barParent.scrollLeft);
            console.log("scroll  " + scrollPosition);
        }

        barParent.addEventListener("scroll", onContainerScroll);
        // 组件卸载时移除事件监听，避免内存泄漏
        return () => barParent.removeEventListener("scroll", onContainerScroll);
    }, [])

    const barArray = [];
    for (let i = 0; i < 200; i++) {
        // 补充循环项的key属性，消除React警告
        barArray.push(<div className='BarBody' key={i}></div>);
    }

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

• 你原来的CSS代码不需要做任何修改，样式逻辑是正常的。
• 普通DOM容器的滚动偏移：横向滚动值读scrollLeft，纵向滚动值读scrollTop，只有滚动发生在window视口本身时，才用window.scrollX/window.scrollY取值。

内容的提问来源于stack exchange，提问作者Abby