Problem with scrolling webkit overflow with x axis?

Question

I have a scrollable div with the following css:

overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; width:200px; height:500px; 

However, on iOS devices, when the content inside the div is wider than the div itself, x-axis scrolling is enabled. How to disable x-axis scrolling?

Answer 1

I had the same problem and there seems to be no x / y options for -webkit-overflow-scrolling, unfortunately. The workaround that I usually use is to wrap the scrollable div in an overflow-x: hidden div, and the problem should be solved.

Markup:

 <div class="scroll-container"> <div class="scroll-wrapper"> <div class="scroll-body"> </div> </div> </div> 

Styling:

 .scroll-container { -webkit-overflow-scrolling: touch; overflow: auto; width: 200px; width: 500px; } .scroll-wrapper { width: 200px; overflow-x: hidden; } 

Answer 2

A very simple solution for this is simply to make sure that none of your elements is wider than the viewport. This can be achieved by placing "catchall" at the top of your CSS:

 div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ... { max-width: 100%; }