CODEWITHSUNDEEP
ioscssipadios7mobile-safari
bright
bright

Reputation: 46

iOS 7 Safari can't scroll DIV with overflow: hidden or auto

I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.

The page structure looks like this:

...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
  <div>
    <div style="overflow: hidden;">
      <div id="mainContent" style="overflow: auto;">...</div>
    </div>
  </div>
</div>
<div id="paneRight" class="expanded">...</div>
...

Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.

Note: this issue has only been identified on an iPad running iOS7.

Upvotes: 3

Views: 5237

Answers (1)

AndreiG
AndreiG

Reputation: 49

This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.

Upvotes: 2

Related Questions