search

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.31k stars 7.29k forks source link

Viewport height and mobile bars when scrolling #1793

Open VIEWSION opened 8 years ago

VIEWSION commented 8 years ago

I know that there is some strange calculation of the viewport dimensions on iOS devices. So If you use 100vh for instance, you probably get wrong values. If verticalCentered is turned on, there is some kind of recalculation to the section containers on rendering to get the proper 100% size. Unfortunately it does not work when you turn off this option.

Anyway, I would love to set the proper height to my containers by css already. I am using some kind of lazy JS loading with fullPage.js and I want to prevent the the section to be resized on rendering.

VIEWSION commented 8 years ago

Sorry - I was wrong that this has something to do with the verticalCentered option. In fact the height is also recalculated when this option is turned off. But on iOS (and very likely on other mobile devices, too), the viewport height is obviously different as there are UI elements of the browser changing its height / appearance on scrolling. I noticed that this behavior seems to be suppressed when fullPage.js is running. Is there any way to run it in the "normal" way where the browser UI elements hide on scrolling? Especially on small devices it takes a lot of space to keep them always visible.

alvarotrigo commented 8 years ago

Is there any way to run it in the "normal" way where the browser UI elements hide on scrolling?

You can take a look at this two topics:

https://github.com/alvarotrigo/fullPage.js/pull/1690 https://github.com/alvarotrigo/fullPage.js/issues/1660

I haven't merged it yet, but there's a possible solution there.

Especially on small devices it takes a lot of space to keep them always visible.

There's no way to decide whether to "keep them visible" or not. That's just the way each browser deals with it. The only way you can make the browser navigation bars to work in their usual way is when you use autoScrolling:false (or the responsive options firing it) or scrollBar:true.

VIEWSION commented 8 years ago

Thank you... I checked it out, but unfortunately the scrollBar:true option does not enter the minimal-ui view on iOS devices either... Only autoScrolling:false takes advantage of the minimal-view. Do you see any chance to get this done somehow?

alvarotrigo commented 8 years ago

Do you see any chance to get this done somehow?

No. We don't have control over the address bars.

VIEWSION commented 8 years ago

ok... sad but obviously true ;) Correct me if I`m wrong.. the iOS minimal-ui is not forced because you fetch all the scrolling events so the browser did actually not know that there is a scrolling event, right? If there is no scrolling event for the browser, the minimal-ui is not working though, right? Is it possible to passthrough the scrolling event but keeping the autoScroll behavior? I am asking because I found a way to detect weather the minimal-ui is active or not. But this obviously makes only sense when minimal-ui is forced somehow by the scrolling event.

alvarotrigo commented 8 years ago

I don't know what is the minimal-ui thing you are talking about. Using scrollBar:true the plugin scrolls the page normally, which means the scroll event is being fired.

Showing or hidding the address bar will depend on the browser and we developers have no direct control over it.

VIEWSION commented 8 years ago

minimal-ui is actually the hiding of the address bar and bottom bar on iOS devices. Sure - this should not be part of fullPage.js as this is custom browser behavior as you said. But it seems that scrollBar:true has no effect on iOS devices. I do not see any scrollbars - only when autoScrolling is turned off, the scrollbars appear and the minimal-ui is triggered.

alvarotrigo commented 8 years ago

I do not see any scrollbars - only when autoScrolling is turned off, the scrollbars appear and the minimal-ui is triggered.

Because iOS hides it by default unless you scroll up or down. But its there. you can check it using the demo online.

VIEWSION commented 8 years ago

Even in your demo the scrollbars do not show up on iOS (iPhone) - and minimal-ui is also not triggered.

alvarotrigo commented 8 years ago

Even in your demo the scrollbars do not show up on iOS (iPhone)

You are right. It does in the Chrome developer tools with iPhone device but it doesn't on the real device.

alvarotrigo commented 8 years ago

Nothing we can do anyway.

VIEWSION commented 8 years ago

Ok - I do not barthehr you anymore ;) Just to let you know... in line 1035, the scroll event is not triggered on iOS because of "event.preventDefault();". If you remove it, you get into trouble with rescaling and the animation is jumping... Ok - I keep it as it is.... I can deal with it. Thank you for that and for your great work! I´m gonna pay you a beer ;)

alvarotrigo commented 8 years ago

line 1035, the scroll event is not triggered on iOS because of "event.preventDefault();". If you remove it, you get into trouble with rescaling and the animation is jumping

Yep, that's right! I forgot about it. I might have a go at this proposed solution

alvarotrigo commented 8 years ago

the scroll event is not triggered on iOS because of "event.preventDefault();"

That's not correct. The scroll event is being fired at line 865. The preventDefault only prevents the normal scrolling of the site, the equivalent to the mousewheel / scrolling bar.

VIEWSION commented 8 years ago

ok... but when I remove it, the scrollbar appear on iOS - maybe iOS deals with it in combination with the swipe speed to show the scrollbars.

alvarotrigo commented 8 years ago

It seems iOS won't show the scroll bar if you disable the normal touch scrolling.