我们在前端开发的过程中经常遇到这种情况。 虽然在小内容上添加滚动条，但为了美观起见，隐藏滚动条还需要支持滚动。 最简单的方法是使用iscroll插件实现，但这不是我们想要的。 仔细想想，现在css实际上可以实现这个功能。 经过仔细考虑，想出了三个好办法。 专业测试可以使用，完全兼容。
一.通过计算滚动条宽度隐藏
HTML代码
……
css代码
. outer-container{
width: 360px；
height: 200px；
定位：关系；
overflow :隐藏；
}
. inner-container{
定位：助手；
left: 0；
top: 0；
right: -17px；
bottom: 0；
overflow-x: hidden；
overflow-y: scroll；
}
这个代码巧妙地向右移动了17个像素，正好等于滚动条的宽度。 这个值是我手动调试的。 在房间里
没有发现和IE有问题。
二. CSS隐藏滚动条
该方法完美支持Chrome、Safari、IE10和Firefox，但与IE的低版本不兼容，但在移动端可以使用。
原理是定制滚动条伪对象选择器：-webkit-scrollbar
chrome和Safari
. element :3360-WebKit-scroll bar { width : 输入}
IE 10
. element {-ms-overflow-style : none； }
联邦快递
. element { overflow :-moz-scroll bars-none； }
HTML代码
css代码
. element{
width: 200px；
height: 200px；
overflow :滚动；
}
. element :3360-WebKit-scroll bar { width : 输入}
. element {-ms-overflow-style : none； }
. element { overflow :-moz-scroll bars-none； }
三、用三个容器包围，不计算滚动条的宽度
这个代码是在我的第一个博客上看到的，我记录得很好。 和我上面说的想法一样，但是在人群中又增加了一个箱子，把内容限制在箱子里。 即使看不到滚动条也可以滚动。
HTML代码
……
css代码
. element， outer-container {
width: 200px；
height: 200px；
}
. outer-container {
border: 5px solid purple；
定位：关系；
overflow :隐藏；
}
. inner-container {
定位：助手；
left: 0；
overflow-x: hidden；
overflow-y: scroll；
}
. inner-container :3360-WebKit-scroll bar {
显示： none；
}
结束语
以上就是代码云笔记今天给大家带来的隐藏css实现滚动条，可以滚动内容的所有代码，在项目中经常被使用。 希望能帮到大家。