Question

这个问题需要一些解释，所以请耐心等待。

与流行的看法相反，默认情况下，Mobile Safari中的网页上未启用惯性滚动（非常流畅的60fps滚动）。由于它在用户体验方面创造了一个不同的世界，我通过在iOS的Modernizr测试之后动态地将此CSS应用于页面的HTML和BODY元素来启用它：

<style>
.touchscroll {
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 position:relative;
 height:100%;
}

.touchscroll body { 
 height:100%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 position:relative;
}
</style>

以上基本上使body元素成为可滚动元素，并通过-webkit-overflow-scrolling：touch，在整个页面上获得平滑的intertia滚动效果。可以找到关于此解决方案的更多背景信息here（免责声明：我自己的文章）。

到目前为止，它的工作原理非常好。问题是这个解决方案有效地禁用了Mobile Safari的另一个非常理想的行为：通常，当向下滚动时，它会使地址栏变小，并完全隐藏浏览器的底栏。它们在向上滚动时会重新出现。

不幸的是，上述技术出于某种原因禁用了此功能。是的，我们有超级平滑的滚动，但浏览器栏总是很大，底栏永久保持可见，都占用了宝贵的空间。

因此，我的问题是，我可以同时拥有两个吗？我想在整个页面上进行超级平滑滚动，但我还想要滚动时浏览器元素的默认隐藏行为。

我正在使用此网站的示例如下： http://www.jungledragon.com/

如果您在Mobile Safari中打开它，您将看到平滑滚动，但不会在向下滚动时隐藏浏览器元素。

Answer 1

我认为您要设置<html>和<body>元素进行滚动。您应该将这些CSS规则应用于您希望能够滚动的1个元素。

所以html或body，不是两者。

移动Safari：身体上的惯性滚动和最小的UI行为？

1 个答案: