Can't interact on mobile with overflow:auto element underneath scrollable section using fullpage.js, scrollOverflow:true

Question

I'm using fullpage.js with scrollOverflow: true. Within a section that requires scrolling, as the section is over 100vh, I have a table that is designed for the user to scroll some content on the x axis.

Though the scrolling this table works on desktop even at a mobile resolution, scrolling this table on a mobile device does not work at all. The table does not respond to any touch interaction.

This seems to have something to do with the .fp-scrollable div that wraps the scrollable fullpage section. If I add pointer-events: none to .fp-scrollable, I can interact with the table on a touch device, but then the section is no longer scrollable. It is also interesting to notice that text within the .fp-scrollable div cannot be highlighted on mobile or desktop. This seems like a clue, but I'm not really sure what it means.

Answer 1

You should be using the fullPage.js option normalScrollElements. Check the docs for more info.

normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.