ios - x軸のwebkit-overflow-scrollingの問題?

Question

次のCSSでスクロール可能なdivがあります：

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

ただし、iOS デバイスでは、div 内のコンテンツが div 自体よりも広い場合、x 軸のスクロールが有効になります。x 軸のスクロールを無効にするにはどうすればよいですか?

Answer 1

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

マークアップ:

<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%;
}