Horizontally scrollable div which contains vertical scrollable div will not scroll horizontally on iOS

Question

Imagine a horizontally scrollable div which contains two vertically scrollable divs.
You are supposed to scroll horizontally to navigate, then scroll vertically in the inner divs to read content.

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

After looking at this question I figured out that you can set -webkit-overflow-scrolling : 'touch' , but in my case I need to look for another solution, since I manipulate the horizontal scroller when the scroll has ended, and touch-scroll does in this case break it.

The following example works fine in Chrome, also Chrome on Android, however on iOS, one is not able to scroll horizontally due to the focus of the input, which always gets passed onto the vertical scrollers.

How do I make both the horizontal and the vertical divs scrollable for iOS, so it works the same way as it does in Chrome?

Answer 1

I think you'd be better off taking the carousel approach where you'd be moving a container when swiping, rather than user the "native" scroll behaviour.

That way you'll be able to slide your DIVs left and right with JS, and scroll up and down using regular scrolling.

Answer 2

You need to replace all overflow-*AXIS* to simple 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>