Question

我花了很多时间尝试jquery / javscript“修复”来实现这一点。自上次更新Chrome Mobile for IOS以来，浏览器的地址栏表现不同。我相信你们都知道我在说什么：你向下滚动你的页面，栏子隐藏起来，但是一旦你向上滚动，就会出现。是的，这是一个很好的用户体验，我可以说。

问题是我的网络应用程序（标题）上面有固定元素，每次向上滚动时，地址栏都会覆盖我的固定元素。

我已经查找了其他网络应用程序（twitter，gmail），他们似乎找到了避免这种情况的方法。我想读一下你如何实现它的想法。没有必要告诉我不要使用固定元素。

所以我的问题是：有没有办法避免这种情况？你对这种情况的看法是什么。

示例：https://mobile.twitter.com/EmWatson（最好在iphone上看）

仅供参考：我在我的网络应用程序中使用Jquery移动框架。

感谢。

Answer 1

好吧，我找到了一种工作方式。

<body style="overflow:hidden;">
    <header style="width:auto;display:block;padding:12px;text-align:center;background-color:#1276c7;color:white;position:fixed;top:0;left:0;right:0;opacity:1;">FIXED HEADER</header>
    <div role="main" style="height:100%;overflow-y:scroll;padding:60px 0;box-sizing:border-box;-webkit-overflow-scrolling: touch;">
            <article>

                  ...(content)...

            </article>
     </div>
 </body>

看来我们需要一个内部可滚动元素并去除身体上的溢出。我似乎已经推翻了它。希望这有助于某人。

移动IOS谷歌Chrome地址栏的行为

1 个答案: