您的位置：首页 > Web前端 > CSS

CSS 实现隐藏滚动条同时又可以滚动

2018-01-25 11:42 691 查看

在百度一搜很多这样提问的，但是很多回答的人都不懂我们到底要什么。我试了很多方法都未成功。
有人说overflow:hidden;啊可以隐藏滚动条啊。
是啊，是可以隐藏但不能滚动啊。当然用js的方法我就不说了，不靠谱（毕竟要加载完才能设置高度，不然一开始拿div的高度一般是不正确的，所以说我不想用js实现）。纯css实现呢，我只能兼容IE9或者以上。我用的React，你用的时候把className换成class就行了首先是webkit,::-webkit-scrollbar{width: 0;}这个伪类是很好可惜只有webkit支持。
我下面说的方法是包括火狐谷歌IE（9和9+）都支持，但是得用局部滚动overflow:auto;
最简单的demo:
<!DOCTYPE html>
<html>
<div id="root"style="width: 100%;height: 100%" >
<div className="outer-container">
<div classname="inner-container">
<div className="container">
</div>
</div>
</div>
</div>CSS:
.outer-container{
width: 100%;
height: 100%;
overflow: hidden;
}
.inner-container{
width: 100%;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding-right: 17px;
}//box-sizing一定要加啊，我之前试了n种方法就是缺了这个属性，这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别
应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。//

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 隐藏滚动条滚轮滚动隐藏网页的滚动条的方法 CSS怎么隐藏滚动条 overflowhidden 隐藏滚动条

相关文章推荐

新的分享

章节导航