mobile IOS Google chrome address bar behaviour

StackOverflow https://stackoverflow.com/questions/18773174

سؤال

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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top