CODEWITHSUNDEEP
ioscsswebkit
Ninjiangstar
Ninjiangstar

Reputation: 225

webkit-overflow-scrolling issue with x-axis?

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?

Upvotes: 8

Views: 13793

Answers (2)

Steve8708
Steve8708

Reputation: 121

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

Upvotes: 10

Scott Lieberman
Scott Lieberman

Reputation: 289

A really easy fix for this is just to make sure none of your elements are wider than the viewport. This can be accomplish by placing a "catchall" at the top of your CSS:

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

Upvotes: -6

Related Questions