在百度一搜很多这样提问的,但是很多回答的人都不懂我们到底要什么。我试了很多方法都未成功。
有人说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 规定的宽度高度行为。宽度和高度分别
应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。//