在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怎么让滚动条隐藏,快快学起来啦~~扫描下方二维码关注深正互联官方微信公众号,扫描下方二维码关注深正互联官方微信公众号,扫描下方二维码关注深正互联官方微信公众号,哈哈哈哈哈哈哈哈哈~重要的事情说三遍啦~

猜你喜欢
联络方式:
深圳 · 龙岗 · 大运软件小镇22栋302-308
电话:400 1828 580
邮箱:szhulian@qq.com



-
拍摄后需要注意什么地方
专业级光学相机都不具备的,譬如说白平衡调节、包围式摄影、场景模式摄影、多点区域评价测光、多点对焦及偏移对焦等等,而且自动曝光功能也越来越强大和完善。
-
深正互联写给初学前端工程师的一封信
前端开发者被native开发分流,以及原本想做前端工程师的后备力量应届生们也选择学native开发,导致前端人荒。随着情况改变,H5(HTML5的大众昵称)在传播上体现的商业价值巨大
-
网站设计之十三则DW使用快技法
熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style。
-
什么是响应式自适应网站?
所谓的响应式网站设计(自适应网站设计),用最通俗的语言来讲,就是通过一个唯一的网址,唯一的一份网站内容,唯一的一份网站代码,通过CSS3 媒体查询方式,可以在多种浏览器设备上进行一致的浏览...
-
详细了解HTML
HTML的全称是HyperTextMarkupLanguage,超文本标记语言 ,其实它就是文本,由浏览器负责将它解析成具体的网页内容,HTML的组成,跟XML类似,HTML由N个标签(节点、元素、标记)组成