gpt4 book ai didi

ios - 移动版 Safari : inertia scrolling on body AND minimal UI behavior?

转载 作者:可可西里 更新时间:2023-11-01 04:56:27 25 4
gpt4 key购买 nike

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

与流行的看法相反,默认情况下,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 的另一个非常需要的行为:通常,当向下滚动时,它会使地址栏变小,并完全隐藏浏览器的底部栏。向上滚动时它们会重新出现。

不幸的是,上述技术出于某种原因禁用了它。是的,我们的滚动非常流畅,但浏览器栏总是很大,底部栏始终可见,两者都占用了宝贵的空间。

因此,我的问题是,我可以同时拥有两者吗?我想要整个页面 super 流畅的滚动,但我也想要滚动时浏览器元素的默认隐藏行为。

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

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

最佳答案

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

所以要么 htmlbody ,而不是两者。

关于ios - 移动版 Safari : inertia scrolling on body AND minimal UI behavior?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34494124/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com