css 超出隐藏滚动条_CSS滚动条隐藏并可以滚动的3种方法实现

在CSS中，隐藏滚动条的同时还支持滚动是可以实现的，而且方法也有不少。下面分享三种CSS滚动条隐藏并可以滚动的方法。

方法1：计算滚动条宽度并隐藏起来

实例

下面给一个简化版的代码

......

.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个像素，刚好等于滚动条的宽度。

方法2：使用三个容器包围起来，不需要计算滚动条的宽度

该代码里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

代码如下：

......

.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;}

方法3：css隐藏滚动条

不过这个方法不兼容IE，做移动端的可以使用。

那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式

chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }

IE 10+

.element { -ms-overflow-style: none; }

Firefox

.element { overflow: -moz-scrollbars-none; }