Div horizontal desplazable que contiene div desplazable vertical no se desplazará horizontalmente en iOS

Imagine un div horizontalmente desplazable que contiene dos divs desplazables verticalmente.
Se supone que debe desplazarse horizontalmente para navegar y luego desplazarse verticalmente en los divs internos para leer el contenido.

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

Después de mirar esta pregunta , descubrí que puedes configurar -webkit-overflow-scrolling : 'touch' , pero en mi caso necesito search otra solución, ya que manipulo el desplazador horizontal cuando el desplazamiento ha terminado y, scroll en este caso lo rompe.

El siguiente ejemplo funciona bien en Chrome, también Chrome en Android; sin embargo, en iOS, uno no puede desplazarse horizontalmente debido al foco de la input, que siempre pasa a los desplazadores verticales.

¿Cómo puedo desplazar tanto los divs horizontales como los verticales para iOS, por lo que funciona del mismo modo que lo hace en Chrome?

Creo que sería mejor tomar el enfoque de carrusel en el que moverías un contenedor al deslizar, en lugar de usar el comportamiento de desplazamiento "nativo".

De esta forma, podrás deslizar tus DIV a izquierda y derecha con JS, y desplazarte hacia arriba y hacia abajo usando un desplazamiento regular.

Debe replace todos los overflow-*AXIS* a auto overflow simple:

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