React 应用程序中的 IE 兼容性问题。滚动条问题答案

【问题标题】：IE compatability issues in react app. scroll bar problemsReact 应用程序中的 IE 兼容性问题。滚动条问题
【发布时间】：2017-04-28 18:48:44
【问题描述】：

我正在为我的客户构建一个 React 应用程序，但我遇到了一些与 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;
}

【问题讨论】：

标签： javascript reactjs browser internet-explorer-11 polyfills

【解决方案1】：

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

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

【讨论】：

【解决方案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;
        }
    }

【讨论】：