我们在前端开发过程中经常会遇到这种情况，在一小块的内容上会加上滚动条，但是为了美观我们会隐藏滚动条还需要支持滚动，最容易的办法就是使用iscroll插件来实现，但这不是我们想要的，细想一下，现在css其实就可以实现这个功能，经过我深思熟虑后，想到了3中比较好的方法，亲测可以使用，并完美兼容。
一、通过计算滚动条的宽度来隐藏
HTML代码
……
css代码
.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome
和IE没发现问题。
二、CSS隐藏滚动条
这个方法完美支持Chrome、Safari、IE10+、Firefox，但是不兼容IE低版本的，不过做移动端的可以使用。
原理就是那就自定义滚动条的伪对象选择器::-webkit-scrollbar
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }
HTML代码
css代码
.element{
width: 200px;
height: 200px;
overflow: scroll;
}
.element::-webkit-scrollbar { width: 0 !important }
.element { -ms-overflow-style: none; }
.element { overflow: -moz-scrollbars-none; }
三、使用三个容器包围起来，不计算滚动条宽度
该代码是我最早一篇博客上看到的，感觉不错就记录下来的，跟我上面的提到的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。
HTML代码
……
css代码
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
结束语
以上就是码云笔记今天为大家带来的css实现的隐藏滚动条并可以滚动内容的全部代码，在项目中经常用到，希望对大家有用。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229201.html原文链接：https://javaforall.net
