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

Question

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

Rum*_*emy 6 browser google-chrome behavior ios jquery-mobile

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

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

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

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

例如:https://mobile.twitter.com/EmWatson(最好在iphone上看到)

仅供参考:我使用Jquery移动框架作为我的网络应用程序.

谢谢.

Answer 1

Rum*_*emy 2

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

<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>

Run Code Online (Sandbox Code Playgroud)

看来我们需要一个内部可滚动元素并删除主体上的溢出。看来我想多了。希望这对某人有帮助。

归档时间：	12 年，2 月前
查看次数：	1857 次
最近记录：	12 年，2 月前