在保持滚动能力的同时隐藏移动设备的滚动条答案

【问题标题】：Hide scrollbar for mobile devices while keeping the scroll ability在保持滚动能力的同时隐藏移动设备的滚动条
【发布时间】：2014-09-13 14:18:13
【问题描述】：

我的问题和这个差不多：

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

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

我发现了这个：

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

在pc上可以正常使用，但是对于移动设备，它会导致页面水平滚动，这是不可接受的。

谁能给我一些建议？非常感谢。

【问题讨论】：

标签： android html css webview

【解决方案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 和原生浏览器中测试

【讨论】：