垂直スクロール可能divを含む水平スクロール可能なdivは、iOSで水平方向にスクロールしません。

Question

水平スクロール可能なdivには、2つの垂直スクロール可能なdivが含まれているとします。
あなたは横にスクロールしてナビゲートし、内側のdivで垂直方向にスクロールしてコンテンツを読むことになっています。

/* MINIMAL RESET */ 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
* { box-sizing: border-box; }

<div style=" 
 
      overflow-x: scroll; 
 
      white-space: nowrap; 
 
      width: 100%; 
 
      height: 100%; 
 
      position: relative; 
 
      background-color: black; 
 
      "> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       left: 0%; 
 
       top: 0px; 
 
       margin: 0px; 
 
       position: absolute; 
 
       display: inline-block; 
 
       background-color: green; 
 
       "> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       overflow-y: scroll; 
 
       "> 
 
     <div style=" 
 
        width: 100%; 
 
        height: 200%; 
 
        "> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       left: 100%; 
 
       top: 0px; 
 
       margin: 0px; 
 
       position: absolute; 
 
       display: inline-block; 
 
       background-color: blue; 
 
       "> 
 
    <div style=" 
 
       width: 100%; 
 
       height: 100%; 
 
       overflow-y: scroll; 
 
       "> 
 
     <div style=" 
 
        width: 100%; 
 
        height: 200%; 
 
        "> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

this questionを見た後、私はあなたが-webkit-overflow-scrolling : 'touch'を設定することができますが、私は、スクロールが終了した水平方向のスクロールバーを操作するので、私の場合、私は、別の解決策を探すために必要なことを考え出し、この場合はタッチ・スクロールを解除します。

次の例は、Chromeの場合でもAndroidのChromeでも問題なく動作しますが、iOSの場合、入力のフォーカスのために水平スクロールできず、常に垂直スクロールバーに渡されます。

水平と垂直の両方のdivをiOS用にスクロールできるようにするには、Chromeと同じように動作しますか？

Answer 1

「ネイティブ」スクロールの動作ではなく、スワイプ時にコンテナを動かす場所にカルーセルアプローチを取る方が良いと思います。

JSを使ってDIVを左右にスライドさせ、通常のスクロールで上下にスクロールすることができます。あなたは、単純なoverflowautoにすべてoverflow-*AXIS*を交換する必要が

Answer 2

：

<div style="overflow: auto; white-space: nowrap; width: 100%; height: 100%; position: relative; background-color: black;"> 
    <div style="width: 100%; height: 100%; left: 0%; top: 0px; margin: 0px; position: absolute; display: inline-block; background-color: green;"> 
     <div style="width: 100%; height: 100%; overflow: auto;"> 
      <div style="width: 100%; height: 200%;"></div> 
     </div> 
    </div> 
    <div style="width: 100%; height: 100%; left: 100%; top: 0px; margin: 0px; position: absolute; display: inline-block; background-color: blue;"> 
     <div style="width: 100%; height: 100%; overflow: auto;"> 
      <div style="width: 100%; height: 200%;"></div> 
     </div> 
    </div> 
    </div>