Search code examples
csswordpressfullpage.jshamburger-menu

FullPageJS prevents touch scrolling on hamburger menu; how to integrate?

I have a website using the fantastic fullPageJS plugin, and it does what it does very, very well.

I have however, an issue on mobile devices, where the sliding hamburger menu does not scroll with touch controls when the menu height exceeds that of the ViewPort, as in this picture:

Menu Scrolling Problem

Question

How do I force the side menu to accept touch-based scrolling?

Solution

  • You should make use of the fullpage.js option called normalScrollElements.

    As detailed in fullpage.js docs:

    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 Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.

    Additionally, you can call fullpage_api.setAllowScrolling(false) when opening the modal. That will prevent fullpage.js to scroll up or down when using the mousewheel or trackpad.

    You can set it back to the default value when closing the menu by using fullpage_api.setAllowScrolling(true).