Fer*_*Fer 5 css mobile-safari ios
这个问题需要一些解释,所以请耐心等待.
与普遍看法相反,默认情况下,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滚动效果.关于这个解决方案的更多背景知识可以在这里找到(免责声明:我自己的文章).
到目前为止,它的工作原理非常好.问题是这个解决方案有效地禁用了Mobile Safari的另一个非常理想的行为:通常,当向下滚动时,它会使地址栏变小,并完全隐藏浏览器的底栏.滚动回来时它们会重新出现.
不幸的是,上述技术由于某种原因禁用了它.是的,我们有超级平滑的滚动,但浏览器栏总是很大,底栏永久保持可见,都占用了宝贵的空间.
因此,我的问题是,我可以同时拥有两个吗？我想在整个页面上进行超级平滑滚动,但我还想要滚动时浏览器元素的默认隐藏行为.
我正在使用此网站的示例如下:http: //www.jungledragon.com/
如果您在Mobile Safari中打开它,您将看到平滑滚动,但不会在向下滚动时隐藏浏览器元素.
| 归档时间： |
|
| 查看次数： |
1058 次 |
| 最近记录： |