問題描述
對于 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模板網！