如何禁用水平拖动?(webkit-overflow-scrolling:触摸；

问题描述

对于 iOS 5 的 webkit 滚动触摸"，我们可以使用以下 css 进行垂直滚动，但我们仍然可以左右拖动页面.我们如何禁用左右拖动?

We have vertical scrolling working fine with the following css for iOS 5's webkit scrolling 'touch', but we are still able to drag the page left and right. How can we disable left and right dragging?

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

提前致谢！

推荐答案

我发现我可以通过查找/修复/删除比宽度更宽的元素来修复它.例如，如果你的容器上有 100% 的宽度，然后里面的元素有 100% 的宽度并带有边距或内边距，即使溢出隐藏在容器上，页面也会左右拖动.

I found I could fix it by finding/fixing/removing elements that were wider than the width. For instance, if you have a 100% width on your container, and then an element inside has 100% width with margin or padding, even if the overflow is hidden on the container, the page will drag from side to side.

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

If you can make sure your elements inside don't horizontally spill outside the container, the page won't drag. If you need padding on a percentage width inside the container (like one element with 100% width, or two with 50% or whatever), 'box-sizing: border-box;' is the way forward.

这篇关于如何禁用水平拖动?(webkit-overflow-scrolling:触摸；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！