包含垂直可滚动div的水平可滚动div不会在iOS上水平滚动

Question

想象一个水平可滚动的div，它包含两个可垂直滚动的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> 

看了这个问题之后我发现你可以设置-webkit-overflow-scrolling : 'touch' ，但在我的情况下我需要寻找另一个解决方案，因为我在滚动结束时操纵水平滚动条，并触摸 -在这种情况下，滚动会打破它。

以下示例适用于Chrome，也适用于Android上的Chrome，但是在iOS上，由于输入的焦点而无法水平滚动，因此输入的焦点始终传递到垂直滚动条。

如何使iOS的水平和垂直div都可滚动，因此它的工作方式与Chrome中的相同？

Answer 1

我认为你最好采取旋转木马的方法，当你在滑动时移动容器，而不是使用“原生”滚动行为。

这样你就可以用JS左右滑动你的DIV，并使用常规滚动向上和向下滚动。

Answer 2

您需要将所有overflow-*AXIS*替换为简单的overflow auto ：

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