webkit-overflow-scrolling issue 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 of the div is wider than the div itself, x-axis scrolling is enabled. How do I disable x-axis scrolling?

Answer 1

I've been having the same problem and it seems that there are no x/y options for -webkit-overflow-scrolling unfortunately. The workaround I typically use is to wrap the scrolling div in an overflow-x: hidden div and 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;
 }