如何禁用水平拖動？ （webkit-overflow-scrolling：touch;）

Question

我們的垂直滾動功能可以很好地處理以下CSS for iOS 5的webkit滾動「touch」，但我們仍然可以左右拖動頁面。我們如何禁用左右拖動？

這裏是CSS：

#page_content{ 

-webkit-overflow-scrolling: touch; 
overflow-x:hidden; 
overflow-y: scroll; 
position:absolute; 
height: 460px; 
width: 320px; 

} 

下面是視頻：提前
http://dl.dropbox.com/u/1737103/scrolling.mov

謝謝！

Answer 1

我發現我可以通過查找/修復/去除比寬度更寬的元素來修復它。例如，如果您的容器寬度爲100％，然後內部的元素具有100％的寬度和邊距或填充寬度，即使容器上隱藏了溢出，頁面也會左右拖動。

如果您可以確保內部的元素不會橫向溢出容器，則頁面不會拖動。如果你需要在容器內的百分比寬度上填充（比如一個100％寬度的元素，或者兩個50％或其他），'box-sizing：border-box';是前進的道路。