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，但对于移动设备，它会导致页面水平滚动，这是不可接受的。

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

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将滚动条拉出视图，我添加了相同大小的填充，因此内容将始终很好地适合屏幕。浏览器不需要让您水平滚动

jsFiddle

在Chrome和原生浏览器的Android上测试

在保持滚动功能的同时隐藏移动设备的滚动条

1 个答案: