Scrolling inside a div which is not in the fullpage.js wrapper not possible on IOS

[NONNNNN]

Description

I have a Fullpage.js wrapper and a special overlay or footer wrapper. My problem now is, that i can't scroll the content inside the footer div on IOS. It works on Android (Chrome) and all major browsers, but not on IOS (Iphone and Ipad).
Any ideas how i can get this to work? As soon as i destroy fullpage, it works like a charm. So i think there are some problems with the bubbeling of touchevents in IOS.

Maybe you can provide something like a "disable fullpage events" and "enable fullpage events" method without destroy fullpage itself :)

Link to isolated reproduction with no external CSS / JS

https://jsfiddle.net/t5eu2hdc/9/

Steps to reproduce it

1. Open the Fiddle on IOS
2. Try to Scroll the Text in the white box on the bottom

Versions

Actual fullpage.js @ 2.9.4
IOS Devices with versions 9.x /10.x (lower versions not testet). Used an older Ipad 3 and an Iphone 7 Plus.

[alvarotrigo]

Maybe you can provide something like a "disable fullpage events" and "enable fullpage events" method without destroy fullpage itself :)

Use destroy() for that.
Or just use $.fn.fullpage.setAllowScrolling(false).

Duplicate of #1912

[NONNNNN]

@alvarotrigo Thank you for the answer. But unfortunately it didn't work. I still can't scroll on ios devices. When i use destroy() it also removes the translate3d values, which i need in this moment (i just destroy when the footer is open, and rebuild after close, so the user dosent see any changes).

Thanks.

[alvarotrigo]

The destroy feature won't scroll your page at all. Not if you just use $.fn.fullpage.destroy() with no parameter all. It will remove the translate3d, but it will keep the site in its place.
It just turns autoScrolling to false enabling the scroll bar as in any site, but the active section should stay in the viewport.

[alvarotrigo]

Try using normalScrollElements anyways.

[NONNNNN]

As you can see in this fiddle, it is still not possible to scroll inside the div, even if i move the footer inside the fullpage wrapper and set normalscrollements and fixedelements to .footer

[alvarotrigo]

Try to reproduce the issue in your site in an isolated page. Dealing with iframes in jsfiddle is far from perfect.

[NONNNNN]

You can find an exact copy of the fiddle code on my site here. it's still not possible to scroll on IOS.

[alvarotrigo]

Remove <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script> . You only need to include fullpage.js once and you are doing it with jquery.fullpage.extensions.min.js

[alvarotrigo]

Not an easy solution.
I would suggest you to use css3:false and place the element within the fullPage.js wrapper.

Then use normalScrollElements.

Other than that... you would have to modify the library and change a few things as suggested in this comment.

[alvarotrigo]

Also, use a higher value in normalScrollElementTouchThreshold just in case. Go for 10 or so.

[NONNNNN]

Hey Alvaro
Unfortunately, nothing suggested by you worked in my case. So i moved over to IScroll for scrolling on IOS devices. Now it works pretty good. For Android and normal browsers i can still use the native scrolling.

Do you know why just IOS dont get the events for scrolling?

[alvarotrigo]

@NONNNNN probably because of the call to this function.
Necessary for fullPage.js in iOS.