CODEWITHSUNDEEP
jqueryiphonehtmlwebsafari
imbecile
imbecile

Reputation: 468

jquery: scrollTop issue on iphone 5 safari when tapping on address bar

I have a webapp that is cross-browser and cross-platform. On iPhones, i have managed to hide the address bar using $(document).scrollTop(0);

Below is the code snippet which carries out what i want to do. 

$(window).ready(function(){
$(window).scroll(function(){ /*detect scroll event*/
    setTimeout("ScrollWindowToTop();",0);
}); 
});
function ScrollWindowToTop(){
bodyelem=$("html,body"); /*i have tried this out with document,window, html, body*/
$(bodyelem).scrollTop(50);
}

I need it to work in the following scenarios: 1. when the user physically scrolls the page 2. when the page is currently at another scroll position, and when i tap the status bar to make the address bar visible, the above function is called and it hides the address bar.

The above scenarios are perfectly implemented in the iPhone 4S. However, the second scenario fails miserably in the iPhone 5.

Does anyone have a clue of what can be done here?

EDIT: I did some playing around with the code. in the function ScrollWindowToTop(), i have edited it as follows

function ScrollWindowToTop(){
   document.body.scrollTop=50;
}

However, if I print the value of document.body.scrollTop in the console, it displays the value as 0. Any idea why Safari in iPhone5 isn't modifying the value of this attribute?

Upvotes: 1

Views: 1853

Answers (1)

imbecile
imbecile

Reputation: 468

Ok, so i found a dirty fix. 

$('body').on('touchstart', function (e){
  if (!$('.activeScroll').has($(e.target)).length){ 
    ScrollWindowToTop();
   }
});

I have only a couple of scrollable elements on my page, so I have added a class called 'activeScroll' to the scrollable element. If a 'touchstart' is detected on any non-scrollable element, it will force the page to scroll up. So if the address-bar decides to be it's pesky stubborn self and not hide, a touch event anywhere on the page will force it back up. Into the land of doom.

Upvotes: 1

Related Questions