反应应用中的IE兼容性问题。滚动条问题

Question

我正在为我的客户构建一个反应应用程序，我与IE有一些兼容性问题。我的侧栏可以正常使用Chrome和所有其他浏览器，但是使用IE11，滚动条会干扰这样的侧边栏。

在chrome中，它工作正常。它看起来像这样

任何想法我能做些什么来解决这个问题？ 我是前端开发的新手，所以我还没有尝试过任何东西。

我将包含代码边栏，如果有帮助..这里是

    class SideCharmMenu extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount(){
        document.body.classList.toggle('has-charm', true);
    }
    componentWillUnmount(){
        document.body.classList.remove('has-charm');
    }

    render() {
        return (
            <div className="charm">
                <button type="button" className="toggle-charm" onClick={this.props.onClick}>
                    <span className="sr-only">Toggle Menu</span>
                    <span className="glyphicon glyphicon-menu-hamburger"></span>
                </button>
            </div>
        );
    }
}

菜单的

css：

 body.has-charm {
  overflow-x: visible;
  padding-right:25px;
}

Answer 1

我使用css解决了这个问题：

body:{
  -ms-overflow-style: scrollbar;
}

Answer 2

如果您使用react-custom-scrollbars，那是“聪明地”添加了负边距，所以我这样做是.here-your-selector { scrollbar-width: none; -ms-overflow-style: none; margin-right: 0 !important; margin-bottom: 0 !important; &::-webkit-scrollbar { display: none; } }