jquery.fullPage.js how to enable scroll within a div without affecting the sections scroll

Question

Right, this is not easy to explain... I'm using jquery.fullPage.js for a website. I have a few collapsable panel hosting a big amount of copy which requires scroll. My problem begins when I enable the scroll on this panel because it sends me to the next section. Is there any way for me to scroll within this panel without affecting the full page scroll?

Thanks guys

Tradesman

Answer 1

Yeah, fullpage.js plugin offers an option called normalScrollElements . As detailed in the documentation:

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')

If you need more control you can always use the fullpage.js method setAllowScrolling to allow the autoScrolling or disable it. This way you can disable it when opening a popup, for example, and enable it again once you close it.

Set

Can you elaborate on this? I got one inner div that has custom html scroll box. How can I target it to disable one-page scroll? – Legalism

Use the id or classname of that element in the option normalScrollElements – Set