javascript - ng-view 不会在移动设备上自动隐藏地址/导航栏

Question

我正在使用 Mobile Angular UI 构建移动网站.几乎完成后，我终于尝试在我的移动设备上对其进行测试。我意识到:当我向下滚动页面时，浏览器的导航栏(即 iPhone 上的 Safari，Android 设备上的 Chrome)不会像以前浏览普通网站时那样自动隐藏。

比如这些网站:

Mobile Angular UI Demo (我项目的index.html和这个index.html几乎一模一样)

wReader

有解决办法吗？或者只是 ng-view 的一个缺点，我将不得不处理它？

非常感谢任何输出。提前致谢。

Answer 1

不幸的是，这个问题无法解决，除非您想使用不同的主题或创建自己的主题。

这是由 CSS 引起的。默认情况下，Mobile Safari 中的滚动感觉并不自然 - 与 native 应用程序相比，页面滚动速度更慢。

为了获得更平滑、有弹性、原生感觉的 iOS 滚动，父元素(div 或 body)的高度为窗口的 100%使用 height 并且它有一个 overflow-y:scroll 属性。

此外，主题的某些功能(例如滑出式导航)可能需要此 CSS 实现才能正常工作。

滚动时，您是在该元素内部滚动，而不是滚动页面。 Mobile Safari 会在页面滚动时缩小地址栏，但是当添加这个 CSS 时，它检测到页面不需要滚动(因为所有元素的父元素都是 100% 的窗口高度，而不是超过那个)。这意味着页面没有滚动，而是页面上的子元素具有滚动的内容)，Mobile Safari 不检测页面滚动。这是无法更改的。我在 my website 上有类似的实现.

我做了一个CodePen这显示了这种效果是如何产生的。由于主体(灰色)不需要滚动——因为它的高度为 500 像素，小于窗口高度——滚动发生在允许滚动的元素之一中。 Mobile Safari 不知道您希望此父元素像整个页面一样运行，因此遗憾的是，此问题无法修复。在上面的笔中，蓝色元素是模拟整个页面的父元素。子元素只是用来添加高度/可滚动内容。