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

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

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,
});

Solution

Your markup seems to be not what jquery.fullPage.js expects. It expects an element with the class fp-scrollable to have children, which is not the case in your jsfiddle.

If you move the class so that

<div class="section">
    <div class="test fp-scrollable">
    ...

becomes

<div class="section fp-scrollable">
    <div class="test">
    ...

you'll see it working. Maybe this is not the markup you want to end up with, maybe you want to further nest .test instead, but regardless this gives you an idea on how to tackle the error.