如何禁用水平拖动？ （webkit-overflow-scrolling：touch;） [英] How to disable horizontal dragging? (webkit-overflow-scrolling: touch;)

问题描述

我们有垂直滚动工作正常与下面的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

提前感谢！

解决方案

我发现我可以通过find / fixing /去除比宽度宽的元件。例如，如果你的容器有100％的宽度，然后里面的元素有100％的宽度带边距或填充，即使溢出被隐藏在容器上，页面也会从一侧拖到另一侧。

如果你可以确保里面的元素不会横向溢出容器外，页面不会拖动。如果你需要在容器内的百分比宽度上填充（比如一个宽度为100％的元素，或者50％或者其他的两个元素），box-sizing：border-box;是向前的方向。 $ b

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?

Here is the CSS:

#page_content{

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

}

Here is the video:
http://dl.dropbox.com/u/1737103/scrolling.mov

Thanks in advance!

解决方案

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.

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：touch;）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！