移动Safari：惯性滚动在身体和最小的UI行为？ [英] Mobile Safari: inertia scrolling on body AND minimal UI behavior?
问题描述
这个问题需要一些解释，所以请和我一起去。
This question requires some explaining, so please bear with me.
与流行的想法相反，默认情况下，在Mobile Safari中的网页上未启用惯性滚动（非常流畅的60fps滚动）。因为它创造了一个不同的用户体验的世界，我已经启用它通过动态应用这个CSS到页面的HTML和BODY元素，在Modernizr测试后专门针对iOS：
Contrary to popular belief, inertia scrolling (the very smooth 60fps scrolling) is not enabled on web pages in Mobile Safari by default. As it makes a world of difference in user experience, I have enabled it by dynamically applying this CSS to the HTML and BODY element of the page, after a Modernizr test for iOS specifically:
<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>
$ b <触摸，在整个页面上获得平滑的intertia滚动效果。此解决方案的一些更多背景可以找到这里（免责声明：自己撰写的文章）。
The above basically makes the body element a scrollable element and by means of -webkit-overflow-scrolling: touch, one gets the smooth intertia scrolling effect on the entire page. Some more background on this solution can be found here (disclaimer: article by myself).
问题是，这个解决方案有效地禁用了移动Safari的另一个高度期望的行为：通常，当向下滚动时，它将使地址栏更小，并且完全隐藏浏览器的底部栏。
It works, so far, so good. The problem is that this solution effectively disables another highly desired behavior of Mobile Safari: normally, when scrolling down, it will make the address bar smaller, and hide the bottom bar of the browser entirely. They re-appear when scrolling back up.
不幸的是，上述技术由于某种原因而禁用此功能。是的，我们有超级顺畅的滚动，但是浏览器栏总是很大，底部栏永远保持可见，这占据了宝贵的空间。
Unfortunately, the above technique disables this for some reason. Yes, we've got super smooth scrolling, yet the browser bar is always large and the bottom bar permanently stays visible, both taking up valuable space.
我的问题是，我可以有两个？我想在整个页面上超级顺畅的滚动，但我还想要滚动时浏览器元素的默认隐藏行为。
My question therefore is, can I have both? I want the super smooth scrolling on the entire page, yet I also want the default hiding behavior of browser elements when scrolling.
我使用这个网站的一个例子在这里：
http://www.jungledragon.com/
An example of a site where I am using this is here: http://www.jungledragon.com/
如果您在Mobile Safari中打开它，您将看到平滑滚动，而不是在向下滚动时隐藏浏览器元素。
If you open that in Mobile Safari, you will see the smooth scrolling, yet not the hiding of browser elements when scrolling down.
推荐答案
我想你设置< html> 和< body> 元素滚动。
I think you're setting both the <html> and the <body> element to scroll. You should apply these CSS rules to 1 element you want to be able to scroll.
因此， html 或者您可以滚动的元素应该使用这些CSS规则。 body ，而不是两者。
So either the html or body, not both.
这篇关于移动Safari：惯性滚动在身体和最小的UI行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
