隐藏滚动条

最近再做项目遇到个问题：移动端页面是否可以隐藏滚动条，同时又保证页面可以滚动？

经查找网上资料，应用如下 CSS 可以隐藏滚动条：

.element::-webkit-scrollbar {display:none}

如果要兼容 PC 其他浏览器（IE、Firefox 等）呢？，同样也有人研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

 

     

        

            ......
        
     
 

.outer-container,.content {
    width: 200px; height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}