隐藏滚动条的兼容性写法

今天看博客的时候发现一个博主写了一种隐藏滚动条的方法,利用了BFC的溢出隐藏，原理是将外部容器的宽度设为比内层容器的宽度小，我认为这种方法实在很取巧，因为BFC的形成往往会影响周边元素，如果外部容器同样定义一个兄弟元素的时候，这种设计的方式就相形见绌。

所以还是推荐使用chorme浏览器提供的伪类选择器::-webkit-scrollbar。

因为这种元素只兼容Chrome 和 Safari，如果要想兼容IE、Firefox 等浏览器，就要使用一种兼容性写法。

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
.outer-container,.content {//让外层容器和内层容器的宽度一致，针对ie等兼容
    width: 200px;
    height: 200px;
}
.outer-container {//让外层容器隐藏溢出的部分（即滚动条部分），针对ie等兼容
    position: relative;
    overflow: hidden;
}
.inner-container {//让容器可以滚动
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {//隐藏滚动条
    display: none;
}