0

In the website I making i have two containers placed side by side. One is the navigation container and the other is the page content container. When you scroll inside these containers it does not collapse the address bar on mobile devices, because you are not actually scrolling the body, so this behavior is expected. Is there any way what so ever i can simply tell the browser that scrolling in these containers is like scrolling in the body?

Here is a picture of the address bar and navigation bar in safari on IOS: enter image description here Here is a picture of the address bar on chrome in android: enter image description here

  • 1
    When you are saying "the mobile browser navigator bar goes away" it means the mobile browser is going to fullscreen. You can add a event when the user "clicks" on your navigation bar then forces the browser to go fullscreen, you can check: http://stackoverflow.com/questions/19355370/how-to-open-a-web-page-automatically-in-full-screen-mode – Troyer Jan 05 '17 at 10:58
  • Don't set any height for the containers. – Santhosh Kumar Jan 05 '17 at 10:58
  • Or like @SanthoshKumar said you can make a `@media` that disables the scroll on mobile :) – Troyer Jan 05 '17 at 10:59
  • Santosh There needs to be a height to the containers otherwise there is no point in having them. The reason they exist is so that you can click on a link in the navigation, i then fetch the assets with ajax and put them into the page element and animate it in to view. When the user then chooses to go back to the navigation they will be in the same place they scrolled to before navigating to the page. – Maximilian Lloyd Jan 05 '17 at 11:04
  • Thank you very much Troyer. Hours of scratching my head come to an end. Hopefully in the future a CSS option to emulate body scrolling will be added but until then this is a more than adequate solution. – Maximilian Lloyd Jan 05 '17 at 11:06
  • This doesn't work in safari though :-/. Massive setback. – Maximilian Lloyd Jan 09 '17 at 09:40

0 Answers0