使用'-webkit-overflow-scrolling：touch'在滚动/拖动时隐藏内容 [英] Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging

问题描述

因为标题说我在使用CSS属性 -webkit-overflow-scrolling：touch 时滚动/拖动内容时出现内容隐藏的问题。

as the title says I'm having the problem with content getting hidden while scrolling/dragging the content when using the CSS property -webkit-overflow-scrolling: touch.

为了基本的了解，这里是我的标记

For a basic understanding, here is my markup

<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 get的隐藏，而我滚动/拖动。任何人遇到这个问题，解决它，还是仅仅是移动Safari的标准行为，以节省内存，没有什么我们能做的吗？

The code itself works good, I can scroll through the content but everything that is inside of a items div get's hidden while I'm scrolling/dragging. Anyone came across this issue and solved it or is it just standard behavior of Mobile Safari to save memory and there is nothing we can do about it?

任何帮助： - ）

推荐答案

你试过将元素放入内存吗？

Have you tried putting the elements into memory?

如果没有，尝试使用css -webkit-transform：translate3d（0,0,0）;

If not, try putting .items in memory using the css -webkit-transform: translate3d(0,0,0);

您可能希望根据性能在嵌套中提高或降低，即应用translate或.page或.item。

You may want to go higher or lower in the nesting depending on performance, ie applying the translate to .page or .item. This will increase the memory used which can get crashy but it helps the browser redraw everything.

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

Anyways, hope that helps!

这篇关于使用'-webkit-overflow-scrolling：touch'在滚动/拖动时隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！