深正互联告诉你css怎么让滚动条隐藏

2019-10-21 932 0 编辑:深正互联 来源:互联网

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

css怎么让滚动条隐藏

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


实例


下面给一个简化版的代码


<div class="outer-container"> 

<div class="inner-container">......</div>

</div>

.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:使用三个容器包围起来,不需要计算滚动条的宽度


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


代码如下:


<div class="outer-container"><div class="inner-container">

<div class="content">......</div>

</div></div>

.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


chrome 和Safari


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

IE 10+


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

Firefox


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


以上就是css怎么让滚动条隐藏,快快学起来啦~~扫描下方二维码关注深正互联官方微信公众号,扫描下方二维码关注深正互联官方微信公众号,扫描下方二维码关注深正互联官方微信公众号,哈哈哈哈哈哈哈哈哈~重要的事情说三遍啦~


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5