Joshua Ohana
Joshua Ohana

Reputation: 6121

fullPage.js On mobile chrome, trying to scroll up causes page reload

iOS mobile Chrome browser.

I have a multi section page using fullPage.js, works perfect in every situation except mobile Chrome browser due to Chrome's "pull down to reload page" feature.

If you try to scroll up (by sliding finger down) it will reload to the page. If you play with it some you'll find that sliding fast will allow you to scroll normally, but if you slide in a more natural way like someone used to scrolling on a website, it'll "stick" at first then just reload the page, instead of sliding up to the next page.

It causing an exceedingly poor user experience as any time the user tries to scroll up they see that little chrome menu bar with the reload/close/back buttons.

https://fiddle.jshell.net/imac/kemtmm9a/embedded/result/ Issue presents itself more clearly without the jsfiddle header but you can definitely see what's going on here.

Update

In testing this out with various solutions found online the root of the issue seems to stem from the fact that window.pageYOffset is always 0, regardless of where the user is on the page. This seems central to how fullPage.js operates which makes sense; however, Chrome detects for a scroll up when the window.pageYOffset=0 and enables the pull to refresh at that time. I am trying to work through some JS to use preventDetault when the user tries to scroll but it's either not working or causing fullPage.js to go haywire.

Upvotes: 1

Views: 1808

Answers (1)

Joshua Ohana
Joshua Ohana

Reputation: 6121

Per the library author's help (https://github.com/alvarotrigo/fullPage.js/issues/2277) am now able to solve with his solution of setting scrollBar:true and autoScrolling:true

This causes the yOffset to behave normally and Chrome does not autorefresh

Upvotes: 1

Related Questions