Question

正如标题所说，当使用CSS属性-webkit-overflow-scrolling: touch滚动/拖动内容时，我遇到了隐藏内容的问题。

基本了解，这是我的标记

<div class="page">
   <div class="section_title">Title</div>
   <div class="items">
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
   </div>
   <div class="section_title">Title</div>
   <div class="items">
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
      <div class="item">...Text and Image...</div>
   </div>
</div>

CSS：

.page {
    width: 320px;
    height: 366px;
    overflow: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

代码本身运行良好，我可以滚动浏览内容，但是当我滚动/拖动时，项目div内的所有内容都被隐藏了。任何人都遇到过这个问题并解决了它，或者只是Mobile Safari的标准行为来节省内存，我们无能为力吗？

感谢任何帮助： - ）

Answer 1

您是否尝试过将元素放入内存？

如果没有，请尝试使用css -webkit-transform: translate3d(0,0,0);

将.items放入内存

您可能希望在嵌套中更高或更低，具体取决于性能，即将转换应用于.page或.item。这将增加使用的内存，这可能会崩溃，但它有助于浏览器重绘所有内容。

无论如何，希望有所帮助！

Answer 2

这可能与webkit中的错误有关。如果您有任何“位置：相对”或绝对，您的代码应该可以正常工作。

使用'-webkit-overflow-scrolling：touch'在滚动/拖动时隐藏内容

2 个答案: