x軸のwebkit-overflow-scrollの問題？

Question

私は、次のCSSでスクロール可能なdiv要素があります：iOSデバイス上しかし

overflow-x:hidden; 
overflow-y:auto; 
-webkit-overflow-scrolling: touch; 
width:200px; 
height:500px; 

、div要素の内のコンテンツがdiv要素自体よりも広い場合、x軸のスクロールが有効になっているが。 x軸のスクロールを無効にするにはどうすればよいですか？

Answer 1

私は同じ問題を抱えていましたが、残念ながら-webkit-overflow-scrollingのx/yオプションがないようです。私が通常使用する回避策は、overflow-x: hidden divにスクロールするdivをラップし、問題を解決する必要があります。

マークアップ：

<div class="scroll-container"> 
    <div class="scroll-wrapper"> 
    <div class="scroll-body"> 
    </div> 
    </div> 
</div> 

スタイリング：

.scroll-container { 
    -webkit-overflow-scrolling: touch; 
    overflow: auto; 
    width: 200px; 
    width: 500px; 
} 
.scroll-wrapper { 
    width: 200px; 
    overflow-x: hidden; 
} 

Answer 2

このため、本当に簡単な修正プログラムはちょうどあなたの要素のどれもがビューポートよりも幅が広いんことを確認することです。これは、CSSの上部に「キャッチオール」を配置することで達成できます。

div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ... 
{ 
    max-width: 100%; 
}