用於移動設備的隱藏滾動條，同時保持滾動能力

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上滾動和本地瀏覽器