手机IOS谷歌浏览器地址栏行为 [英] mobile IOS Google chrome address bar behaviour
问题描述
我花了很多时间试图让jquery / javscript修复来实现这个工作。自上次更新Chrome移动版本以来，浏览器的地址栏的行为有所不同。我确定你们知道我在说什么：你向下滚动你的页面，酒吧藏起来，但是一旦你向上滚动，它就会出现。是的，这是一个很好的用户体验，我可以告诉。
问题是，我的网站应用程序（标题）上有固定的元素，每次我向上滚动，地址栏覆盖了我的固定元素。
我查找了其他web应用程序（twitter，gmail），他们似乎找到了一种方法避免这一点。我想阅读你对他们如何实现它的想法。没有必要告诉我不要使用固定元素。
所以我的问题是：有没有办法避免这种情况？你对这种情况有何想法。
https://mobile.twitter.com/EmWatson （必须在iphone上看到）FYI：我使用Jquery移动框架web app。
谢谢。 ，我找到了一种工作方式。
< body style =overflow：hidden;>
<文章>
...（内容）...
< / article>
< / div>
< / body>
看起来我们需要一个内部滚动元素并删除正文上的溢出。看来，我推翻了它。希望这可以帮助别人。
I have spent a lot of time trying jquery/javscript "fix" to get this worked. Since the last update of chrome mobile for IOS, the address bar of the browser behaves differently. I'm sure you guys are aware of what I'm talking about: You scroll down your page, the bar hides up, but once you scroll up, it appears. Yes, it is a good user experience, I can tell.
The problem is that I do have fixed element on top of my web app (header), and every time I scroll up, the address bar goes over my fixed element.
I've lookup other web apps (twitter, gmail), and they seems to have found a way to avoid this. I would like to read your ideas of how they achieved it. There is no need to tell me not to use fixed element.
So my question is : is there a way to avoid this? What's your idea of the situation.
example: https://mobile.twitter.com/EmWatson (must see on iphone preferably)
FYI : I use Jquery mobile framework for my web app.
thanks.
Well, I found a way to work.
<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>
It appears that we need an inner scrollable element and remove overflow on body. I overthought it, it seems. Hope this helps someone.
这篇关于手机IOS谷歌浏览器地址栏行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
