All geek questions in one place

Google Chrome iOS Mobile Browser Behavior

I spent a lot of time trying jquery / javscript to “fix” for this to work. Since the latest update to chrome mobile for iOS, the address bar of the browser behaves differently. I am sure that you guys know what I'm talking about: you scroll down the page, the panel hides, but after scrolling up it appears. Yes, this is a good user experience, I can say.

The problem is that I have a fixed element on top of my web application (header), and every time I scroll up, the address bar goes through my fixed element.

I am browsing other web applications (twitter, gmail) and they seem to have found a way to avoid this. I would like to read your ideas on how they achieved this. There is no need to tell me not to use a fixed element.

So my question is : is there a way to avoid this? What do you think of the situation.

example: https://mobile.twitter.com/EmWatson (preferably seen on iphone)

FYI: I am using jQuery for mobile applications for my web application.

thanks.

+6
source share
1 answer

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 looks like we need an internal scrollable element and remove the overflow on the body. I seem to have thought too much about this. Hope this helps someone.

+2
source

Source: https://habr.com/ru/post/953728/

More articles:


All Articles