Question

使用触控输入时，Lion中的Chrome和Safari具有类似Mobile Safari的过度滚动功能。在大多数网页上，显示的背景是一种灰色羊皮纸图案。虽然，有一些网站没有显示这种背景，并且要么具有单一颜色，要么具有第一像素背景的重复版本。

Stack Overflow按预期运行 stack overflow screenshot

mozilla网站如下所示 firefox features screenshot

到目前为止，我还没有找到发生这种情况的唯一原因。有记录吗？有没有一种方法可以复制它？要么第一个像素的背景向上伸展，要么完全不同。

更进一步。如果可以复制它，可以使用效果重新创建许多移动应用程序中的“拉动刷新”功能吗？换句话说，这个过度滚动是在dom内测量还是只是OS产生的效果？

感谢

Answer 1

您所谈论的实际上是一种对所有狮子会应用程序来说都很常见的行为。 Chrome 15（和16）支持此功能，而Chrome 14则不支持。这是应用程序是否已经过触摸优化的问题。

我认为没有办法控制这种行为（除非浏览器引入某种“过度滚动”的javascript事件 - 非常怀疑这种情况会发生。）

也没有通过CSS为这个区域设置样式的方法。

Answer 2

这适用于chrome 15。

position：fixed，top：0和3d变换操作的组合似乎会导致这种行为。

<!doctype html>  
<head>
  <style>
  #header {
    position: fixed;
    top: 0;
    background: red;
  }

  #content {
    /*
    -webkit-transform: rotate3d(0,0,0,0deg);
    */
    -webkit-transform: scale3d(1,1,1);
  }
  </style>
</head>

<body>
<div id="header">header</div>
<div id="content">content</div>
</body>
</html>

在使用多点触控滚动时，是否可以设置狮子显示的页面背景样式

2 个答案: