Picture a div that scrolls horizontally, housing two vertical-scrolling divs. You'll need to scroll left and right to navigate, then up and down inside the inner divs to read the content.
/* RESET TO MINIMUM */
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>Upon reading this post, I learned you can use
-webkit-overflow-scrolling : 'touch'This setup functions well in Chrome and Chrome on Android, but iOS poses a challenge where horizontal scrolling is hindered by input focus always shifting to the vertical scrollers. How do I enable both horizontal and vertical scrolling for iOS like it's seamless on Chrome?