css隐藏滚动条方法
目录
我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用 iscroll 插件来实现,但这不是我们想要的,细想一下,现在 css 其实就可以实现这个功能,经过我深思熟虑后,想到了 3 中比较好的方法,亲测可以使用,并完美兼容。
一、通过计算滚动条的宽度来隐藏
HTML 代码
<div class="outer-container"> <div class="inner-container"> ...... </div> </div>
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 代码
<div class="element"></div>
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 代码
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div>
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 实现的隐藏滚动条并可以滚动内容的全部代码,在项目中经常用到,希望对大家有用。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css隐藏滚动条方法
码云笔记 » css隐藏滚动条方法