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

发布于 2024-12-05 01:00:23 字数 508 浏览 2 评论 0原文

当使用触摸输入时，Lion 中的 Chrome 和 Safari 具有像 Mobile Safari 一样的过度滚动功能。在大多数网页上，显示的背景是一种灰色羊皮纸图案。尽管如此，有些网站不显示此背景，并且要么具有单一颜色，要么具有第一个像素的背景的重复版本。

堆栈溢出的行为符合预期堆栈溢出截图

并且mozilla网站如下所示 firefox功能截图

到目前为止，我还无法确定发生这种情况的任何原因。有记录吗？有没有办法复制它？第一个像素的背景要么向上拉伸，要么完全不同。

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愚人国度 2024-12-12 01:00:27

你所说的实际上是所有狮子化应用程序所共有的行为。 Chrome 15（和 16）支持此功能，而 Chrome 14 不支持。这取决于应用程序是否进行了触摸优化。

我认为没有任何方法可以控制这种行为（除非浏览器引入某种“过度滚动”javascript 事件——高度怀疑这种情况会发生）。

也没有已知的方法可以通过 CSS 设置该区域的样式。

回复收藏 0 原文

明天过后 2024-12-12 01:00:27

这在 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>

This works in chrome 15.

The combination of position: fixed, top:0 and a 3d transform operation seem to lead to this behavior.

<!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>

回复收藏 0 原文

~没有更多了~