4

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.

4

1 回答 1

2

我有同样的问题，似乎在添加新的 DOM 元素后分配 CSS 类似乎工作正常：

// 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>
于 2012-09-04T04:07:36.723 回答