Question

在移动Web应用程序中，我有一个div，可以使用新的花式-webkit-overflow-scrolling：touch滚动。唯一的问题是仅在滚动完成时才呈现内容。有没有办法让Mobile Safari（也许是其他移动浏览器，比如Android中的那个）在单指滚动时渲染html？

.layer-content {
  position: absolute;
  top: 112px;
  bottom: 0;
  width: 100%;
  background: #e6e6e6;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;    
}

Answer 1

您可以使用硬件加速解决此问题。尝试将以下CSS添加到.layer-content中的元素：

-webkit-transform: translate3d(0,0,0);

Answer 2

不是真的。这就是iPhone的工作方式。如果滚动，所有资源都用于使滚动非常平滑，但不会显示新部件。您可能会欺骗浏览器认为图层更大，更大，并在您不想显示的部分顶部添加图层，但这并不适用于所有布局。我会留下它。用户习惯了它，因为普通页面具有相同的“渲染问题”。

Answer 3

位置：绝对正在弄乱渲染。在滚动停止之前，Mobile Safari不会呈现没有标准定位值的元素。

如果位置为自动（默认值），Mobile Safari将在您滚动时渲染元素。

Answer 4

我非常确定我刚刚解决了这个问题：

overflow-y: auto;

将其添加到滚动元素。

（根据您的需要，大概只有overflow: auto;也可以。）

Safari中的单指滚动不会渲染html，直到滚动完成

4 个答案: