-webkit-overflow-scrolling 对象插入 DOM 的问题答案

【问题标题】：-webkit-overflow-scrolling Problems With Objects Inserted Into DOM-webkit-overflow-scrolling 对象插入 DOM 的问题
【发布时间】：2012-09-04 12:07:36
【问题描述】：

我正在使用 -webkit-overflow-scrolling:touch 在我的 iPad 上实现本机滚动功能。但是我遇到了一个很奇怪的问题：

我有一个div 和不同的孩子。如果这些孩子足够大，可以产生滚动需求，那么设备可以正确滚动，具有动量和所有功能。但是，如果这个 div 不够大以至于需要滚动，并且突然插入了元素并且现在确实需要滚动，那么您将根本无法滚动该元素。

我希望这不会太令人困惑，但如果有人能阐明在这种情况下该怎么做，那就太好了。那里没有太多关于此属性的文档。

编辑：尝试了很多测试，现在看来这只是一个一般间歇性的问题。无论内容如何，每 5 次左右，我的整个 Web 应用程序都会滚动失败。

【问题讨论】：

您介意发布指向您的网站、jsfiddle 或 codepen 的链接吗？
做了更多测试，似乎只是这个属性的一般间歇性问题。
是的，我也遇到了同样的问题。不同的上下文，但基本上-webkit-overflow-scrolling 不时卡住（主要在 iPhone 4 vs 4s 上）。已经阅读了我可能在网上找到的所有内容，到目前为止，它在 iOS 中似乎是一个不稳定的实现。我认为 iOS6 将会从我在测试中看到的一些改进。但是，如果有人有关于刷新可滚动 div 的提示，那将非常有帮助。无论如何，祝你好运。

标签： ios mobile-safari

【解决方案1】：

我遇到了同样的问题，似乎在添加新的 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>

【讨论】：