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

Question

我的问题是几乎与此相同：

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

我装列表样式网页的webview Android应用程式。我发现由于滚动条的原因，页面右侧有一个空白区域。它很烦人。我想隐藏滚动条，但保持滚动的本地感觉像@加布里埃尔Cirulli说。

我发现这一点：

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

它工作正常的电脑，但对于移动设备，它使网页水平滚动，这是不能接受的。

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

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格都具有相同的尺寸车身（全尺寸），由于身体和.container都有overflow: hidden他们将永远不会显示任何方向的滚动条。

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

jsFiddle

在Chrome测试Android上滚动和本地浏览器