Mobile safari: window.pageYOffset / scrollY seemingly ignores navigation bar height even though it scrolls
So I have setup a scroll listener:
window.onscroll = function (){
alert(window.pageYOffset); // have also tested with window.scrollY
}
And, as expected, I get my alerts once scroll is complete. I have the debug console, turned off for this as well, so as not to add any extra space in the mobile browser, hence doing the alert() and not console.log().
Now, I am also doing this onload:
setTimeout(function()
{
window.scrollTo(0, 0);
}, 33);
And, as expected, the navigation bar hides on load. I tried just doing the window.scrollTo() without the 开发者_StackOverflow中文版timeout, and it was failing until I added the timeout. Anyway, that's not the issue. My navigation bar hides, which is what I wanted.
So now that I have my viewport moved to 0,0 and and alert firing on scroll, I would expect that the act of dragging my finger down (scrolling up) to reveal the Navigation Bar would tell me that window.pageOffsetY < 0 or window.scrollY is < 0. That is not the case. Instead my alerts tell me 0 in both cases, even though I have scrolled up to reveal those 60px (120px on retina) of the browser Navigation Bar.
My question is: Is there a way to tell if you are scrolling into the Navigation Bar space?
The ultimate goal for this is to have something always positioned at the bottom. I have my element doing that on scroll properly except when I start entering into the Navigation Bar scroll space as mobile safari reports the scrollY / pageYOffset as 0 even though there is some more scroll action happening.
Ah on iOS you can look at:
window.innerHeight
If you are scrolling with he navigation bar in view, then the innerHeight will be less than 416. the min innerHeight should be 416-60. aka 356 which would let you know the full navigation bar is in view.
精彩评论