如何禁用水平拖动? (webkit-overflow-scrolling:touch;)

时间:2012-01-18 09:26:31

标签: iphone css3 ios5 webkit

对于iOS 5的webkit滚动“触摸”,我们使用以下css进行垂直滚动工作正常,但我们仍然能够左右拖动页面。我们如何禁用左右拖动?

这是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

提前致谢!

1 个答案:

答案 0 :(得分:6)

我发现我可以通过查找/修复/删除比宽度宽的元素来修复它。例如,如果容器上有100%的宽度,然后内部的元素具有100%宽度的边距或填充,即使溢出隐藏在容器上,页面也会从一侧拖到另一侧。

如果您可以确保内部元素不会在容器外部水平溢出,则不会拖动页面。如果你需要在容器内的百分比宽度上填充(比如一个100%宽度的元素,或两个50%或其他的元素),'box-sizing:border-box;'是前进的方向。

相关问题