android - 隐藏移动设备的滚动条，同时保持滚动能力

Question

我的问题与此几乎相同:

Hide the scrollbar but keep the ability to scroll with native feel

我将一个列表样式的网页加载到一个 Android 应用程序的 webview 中。我发现由于滚动条，页面右侧有一个空白区域。这很烦人。我想隐藏滚动条，但保持滚动的能力，就像@Gabriele Cirulli 所说的那样。

我发现了这个:

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

在pc上没问题，但是在移动设备上，会导致页面水平滚动，这是 Not Acceptable 。

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

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 都与主体(全尺寸)具有相同的尺寸，并且由于主体和 .container 两者都有 overflow: hidden 它们永远不会在任何方向显示滚动条。

.scroll 有一个 overflow-y: scroll 所以它可以垂直滚动，但不能水平滚动。使用 right: -20px 将滚动条拉出 View ，我添加了相同大小的填充，以便内容始终适合屏幕。浏览器将不再需要让你水平滚动

jsFiddle

在 Android 的 Chrome 和 native 浏览器中测试