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

Question

我们使用以下CSS实现了在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

提前致谢！

- user1155813

---

我遇到了同样的问题，是的，它仍然保持在横屏模式。 - Turner Hayes

我也有这个问题。我尝试将其放入一个带有overflow:hidden的div中以及其他无数解决方案，但都没有起作用。 - Andrew Plummer

Answer 1

我发现只要找到/修复/删除宽度大于容器宽度的元素，就可以解决这个问题。例如，如果您的容器具有100％的宽度，然后其中一个元素具有带有边距或填充的100％宽度，即使在容器中隐藏了溢出，页面也会左右滑动。

如果您确保容器内的元素不会出现水平溢出，页面就不会滑动。如果您需要在容器内进行百分比宽度的填充（例如具有100％宽度的一个元素或两个具有50％或其他宽度的元素），则应使用'box-sizing: border-box;'。

- Ben