html5隐藏滑动条,如何隐藏滚动条但又能滚动，不用js实现

知乎很多这样提问的，但是很多回答的人都不懂我们到底要什么。

有人说overflow:hidden;啊可以隐藏滚动条啊。

是啊，是可以隐藏但不能滚动啊。当然用js的方法我就不说了，不靠谱(毕竟要加载完才能设置高度，不然一开始拿div的高度一般是不正确的，所以说我不想用js实现)。

纯css实现呢，我只能兼容IE9或者以上。

首先是webkit,::-webkit-scrollbar{width: 0;}这个伪类是很好可惜只有webkit支持。

我下面说的方法是包括火狐谷歌IE(9和9+)都支持，但是得用局部滚动overflow:auto;

最简单的demo:

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html,

body {

height: 100%;

}

html {

overflow: hidden;

}

body {

overflow: auto;

width: calc(100vw + 20px);

}

.page {

height: 200%;

border: 1px dashed;

width: 100vw;

}

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

我是文字啊啊啊啊啊th

说说原理吧，首先是vw,vh这种css3单位不懂请百度，让body宽度是窗口宽度加上20px(浏览器滚动条差不多这个宽度)，.page里面的宽度是100%视口也就是100vw，这样body的滚动条就被隐藏了(超出部分被html隐藏)。

优点：不用js(js必须页面加载完拿高度才准确)。

缺点：1、IE8不支持，2、移动端不用测试了，移动端滚动条没那么简单，3、overflow:auto;局部滚动在火狐浏览器滚动速度变慢不知道为什么。

求有没有方法能解决第1，3个缺点的，要求不用js。