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

前端之家收集整理的这篇文章主要介绍了css – 使用’-webkit-overflow-scrolling:touch’在滚动/拖动时隐藏内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
标题说我在使用CSS属性-webkit-overflow-scrolling:touch时滚动/拖动内容时遇到内容变得隐藏的问题.

为了一个基本的了解,这里是我的标记

  1. <div class="page">
  2. <div class="section_title">Title</div>
  3. <div class="items">
  4. <div class="item">...Text and Image...</div>
  5. <div class="item">...Text and Image...</div>
  6. <div class="item">...Text and Image...</div>
  7. </div>
  8. <div class="section_title">Title</div>
  9. <div class="items">
  10. <div class="item">...Text and Image...</div>
  11. <div class="item">...Text and Image...</div>
  12. <div class="item">...Text and Image...</div>
  13. </div>
  14. </div>

和CSS:

  1. .page {
  2. width: 320px;
  3. height: 366px;
  4. overflow: scroll;
  5. overflow-x: hidden;
  6. -webkit-overflow-scrolling: touch;
  7. }

代码本身效果很好,我可以滚动内容,但是当我滚动/拖动时,项目div内的所有内容都被隐藏.任何人都遇到这个问题,解决了它,还是只是Mobile Safari的标准行为来节省内存,没有什么可以做的呢?

任何帮助是赞赏:-)

解决方法

你是否尝试将元素放入内存?

如果没有,请尝试使用css -webkit-transform将.items放入内存:translate3d(0,0);

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

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

猜你在找的CSS相关文章