If your page has scrollable elements like modals or containers with overflowing text, then you'll need to tell fullPage.js about it. This way, fullpage.js will allow normal scrolling inside those elements and will prevent fullpage.js sections from scrolling up or down in these cases.

You'll be able to scroll within certain elements you define. Scrolling inside those elements will get enabled without affecting the sections/slides scroll. 

This will work for both, mouse wheel scrolling and swiping on touch screen devices.

Using normal scroll elements

fullPage.js has an option called normalScrollElements that you can use in these cases. Here's an example: 

new fullpage('#fullpage', {
    normalScrollElements: '#element1, .element2'
});

As the documentation points out,  it expects a string with the Javascript selectors for those elements. In this case our elements will have  id="element1" and the   class="element2"

Warning! This option should not be applied to any section/slide element itself. If you need the content of the whole section or slide to be scrollable, use the option scrollOverflow: true. See this example.

You can play with this example using the normalScrollElements option:

See the Pen fullpage - normalScrollElements by Álvaro (@alvarotrigo) on CodePen.

 

 

You might also find these articles relevant: