Question

Using JavaScript, how do I scroll past the URL bar in Landscape mode. On Portrait mode, you just do window.scrollTo(0,1) and that works, but not in Landscape mode. It goes part-way on the URL bar.

Any suggestions on what to try?

Answer 1

There is two ways of doing this. Depending on what kind of page you are displaying.

One thing to be aware of is that the mobile browser needs to have some content to scroll on. And by content to scroll on I mean that the content in the page needs to be higher then the window height. If not it’s not going to scroll down at all.

Option1

Go for this if you know that your page content is more then the window height.

    (function removeAddressBar(){
         // Make sure it really scrolls down.
         window.scrollTo(0, 10);

         // Set a timeout to check that it has scrolled down.
         setTimeout(function() { 
              if(window.scrollY == 0) { 
                   removeAddressBar();
              }else{
                   window.scrollTo(0, 1);
                   //launch();
              }
         }, 500);
    })(this)

Option2

Go for this if you dont know if your content is more then the window height.

<div id='scroller' style='position:absolute;height:2000px;'></div>

    (function removeAddressBar(){
         window.scrollTo(0, 10);
         setTimeout(function() { 
              if(window.scrollY == 0) {
                   removeAddressBar();
              }else{
                   window.scrollTo(0, 1);
                   document.getElementById('scroller').style.height = window.innerHeight+'px';
                   //launch();
              }
         }, 500);
    })(this)

This might look like a lot for such a simple thing. But I think this is the most reliable way so far.. I have tested this on iOS and Android in both orientations.