fullPage.js provides a way to enable the normal scroll so you can scroll inside sections or slides when the content is bigger than the height of the section. Check this scrolling example to see how it looks.

If you want a scrollable section you have to set the scrollOverflow option to true during the initialization of fullPage.js

new fullpage('#fullpage', {
	//options here
	scrollOverflow: true
});

This configuration requires the scrolloverflow vendor library scrolloverflow.min.js. This file has to be loaded before the fullPage.js plugin, but after jQuery ( in case of using it). For example:

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>

By default, fullPage.js will create a scrollbar on large sections or slides. If you want to prevent this behavior in specific sections or slides, use the class fp-noscroll on them. For example: <div class="section fp-noscroll">

You can also prevent scrollOverflow from getting applied on responsive mode when using fp-auto-height-responsive in the section element. This can be useful for the responsive mode of mobile devices.

Make an element scrollable, not the full section

If your page has scrollable elements like modals or containers with overflowing text, you might want to be able to scroll within those elements without triggering the scroll of the whole page or the slides on the active section.

In this case, you would have to use a different option named normalScrollElements. Check in this article how to make an element scrollable inside a fullpage.js section or slide.

 

 

You might also find these articles relevant: