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

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将.items放入内存 -webkit-transform: translate3d(0,0,0);

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

无论如何,希望有所帮助!