包含垂直滚动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上不会水平滚动

回答

相关问题