包含垂直滾動div的水平滾動div在iOS上不會水平滾動

想象一下包含兩個垂直滾動div的水平滾動div。
您應該水平滾動瀏覽，然後在內部div中垂直滾動以閱讀內容。包含垂直滾動div的水平滾動div在iOS上不會水平滾動

/* 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中，由於輸入焦點始終無法水平滾動，因此始終會傳遞到垂直滾動條上。

如何讓橫向和縱向divs都可以在iOS上滾動，所以它的工作方式與Chrome中的相同？

來源

2016-03-11 Frederik Witte

你有沒有試過像[這裏]（http://patrickmuff.ch/blog/2014/10/01/how-we-固定最WebKit的溢出滾動觸摸-bug的上-IOS /）？ –

你說你「在滾動結束時操作水平滾動條，在這種情況下觸摸滾動會打破它」，並且還提到「輸入焦點」。你可以通過編輯你的[最小的，完整的和可驗證的例子]（http://stackoverflow.com/help/mcve）來顯示這兩者嗎？ – gfullam

那麼，編輯它之前有更少的代碼......但是！我的意思是我必須在用戶完成滾動後更改滾動位置。 –

我認爲你最好採用旋轉木馬的方式，在滑動時移動容器，而不是使用「本機」滾動行爲。

這樣你就可以用JS左右滑動你的DIV，並使用常規的滾動來上下滾動。

來源

2016-03-18 15:34:02 justinledouxweb

您需要替換所有overflow-*AXIS*簡單overflowauto：

<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>

來源

2016-03-18 21:54:49 Undefitied

包含垂直滾動div的水平滾動div在iOS上不會水平滾動

回答

相關問題