CODEWITHSUNDEEP
iosmobile-safari
John Shammas
John Shammas

Reputation: 2715

-webkit-overflow-scrolling Problems With Objects Inserted Into DOM

I'm using -webkit-overflow-scrolling:touch for native scrolling capabilities on my iPad. But I've come into quite an odd problem:

I have one div with various children. If these children are big enough to create the need for scrolling, the device properly scrolls correctly, with momentum and all. However, if this div is not big enough to require scrolling, and suddenly has elements inserted into it and now does require scrolling, you will not be able to scroll the element at all.

I hope that wasn't too incredibly confusing, but if someone could shed some light on what to do in this situation, that would be fantastic. There isn't much documentation about this property out there.

EDIT: Tried testing this a lot, and it seems now it's just a generally intermittent problem. Every 1 out of 5 times or so, scrolling just fails for my entire web app, no matter the contents.

Upvotes: 4

Views: 2665

Answers (1)

Sönke Rohde
Sönke Rohde

Reputation: 300

I had the same issue and it seems like assigning the CSS class after the new DOM element is added seems to work fine:

// your code to add a div to the DOM
// the div contains a scrollable div with the content class
setTimeout(function(){
  // this is using JQuery
  div.find(".content").addClass("overflowScroll");
}, 1);

// CSS class
.overflowScroll {
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

// The HTML for the div
// I am adding a dynamic list to the content div
// which should use the overflow scroll
<div class="panel">
  <div class="header">

  </div>
  <div class="content"></div>
</div>

Upvotes: 2

Related Questions