开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜