在CSS中,隐藏滚动条的同时还支持滚动是可以实现的,而且方法也有不少。下面分享三种CSS滚动条隐藏并可以滚动的方法。
方法1:计算滚动条宽度并隐藏起来
实例
下面给一个简化版的代码
......
这样可以实现把导航条隐藏起来,但是鼠标停留的时候是有颜色变动的。
这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。
方法2:使用三个容器包围起来,不需要计算滚动条的宽度
该代码里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。
代码如下:
......
方法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; }