如何仅使用纯内联CSS移除React <Scroll/> 组件右侧的滚动条

你原有代码存在两个核心问题：

• 样式中的scrollbar:'diplay:none'存在拼写错误（diplay应为display）
• 单靠该属性无法兼容多浏览器，不同内核浏览器需要专属的滚动条隐藏配置

修改后的完整代码如下，完全基于纯内联CSS实现滚动条隐藏，滚动功能不受影响：

const Scroll = (props)=>{
    console.log(props.children);
    return (
        <div style={{
            overflowY: 'scroll',
            border: '5px solid black',
            height: '500px',
            /* 兼容Chrome、Safari等Webkit内核浏览器 */
            WebkitScrollbar: {
                display: 'none'
            },
            /* 兼容IE、旧版Edge浏览器 */
            msOverflowStyle: 'none',
            /* 兼容Firefox浏览器 */
            scrollbarWidth: 'none'
        }}>
            {props.children}
        </div>
    );
}

export default Scroll;

该方案无需额外引入外部样式文件或额外CSS类配置，兼容当前所有主流桌面端浏览器，仅隐藏滚动条视觉表现，上下滚动交互完全正常。

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