移动设备上隐藏滚动条但保留滚动功能

Question

我有一个问题，几乎和这个一样: 隐藏滚动条但保留原生滚动的能力 我将一个列表样式的网页加载到了 Android 应用程序的 webview 中。我发现由于滚动条，在页面右侧有一个白色空间。这很烦人。我想隐藏滚动条，但保留像 @Gabriele Cirulli 所说的原生滚动的能力。

我找到了这个:

http://hynchrstn.wordpress.com/2012/06/10/hide-scrollbar-but-still-scrollable-using-css/

这对于电脑来说运行良好，但对于移动设备来说会导致页面水平滚动，这是不可接受的。

有人能给我一些建议吗？非常感谢。

- Vigor

Answer 1

根据您提供的链接，我能够得出更加稳定的解决方案。

HTML

<div class="container">
    <div class="scroll">
        [...lots of text]
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container,
.scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.container {
    overflow: hidden;
}
.scroll {
    padding-right: 20px;
    right: -20px;
    overflow-y: scroll;
}

简述：

.container 和 .scroll div 元素的尺寸与 body 相同（全屏），并且由于 body 和 .container 都设置了 overflow: hidden，所以它们不会在任何方向上显示滚动条。

.scroll 设置了 overflow-y: scroll 以便可以垂直滚动但不能横向滚动。滚动条被隐藏在视图之外，通过 right: -20px 实现，并加入相同大小的填充使内容始终适配屏幕。这样就没有必要让浏览器让你水平滚动

jsFiddle

已测试通过 Android 中的 Chrome 浏览器和原生浏览器

- Stephan Muller