Scrollable div inside section of Fullpage.js doesn't work

Question

I want to have a scrollable div inside a section of fullpage.js but when I include scrollOverflow: true then I get this error: Cannot read property 'scrollHeight' of undefined.

The scrollOverflow library is included:

http://jsfiddle.net/97tbk/1827/

I wonder what am I missing:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    scrollOverflow: true
});
$('.fp-scrollable').slimScroll({
    alwaysVisible: true,
    color: 'black',
    size: '10px',
    allowPageScroll: true,
});

Answer 1

You just need to use scrollOverflow:true and include the scrolloverflow.min.js file as detailed in the fullPage.js docs.

scrollOverflow: (default false) (not compatible with IE 8) defines whether or not to create a scroll for the section/slide in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor library scrolloverflow.min.js and it should be loaded before the fullPage.js plugin. For example:

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

You have an example available in the examples folder in fullPage.js

For fullPage.js version 3 it would almost be identical:

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