CODEWITHSUNDEEP
javascripthtmlcssfullpage.jsslimscroll
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

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

Upvotes: 1

Views: 9614

Answers (4)

Mate Šimić
Mate Šimić

Reputation: 1

The only thing that you need to do is to assign some kind of selector on the area that you want to be able to scroll inside fullpage section for example

<div id="scroll-area">Some long scrollable content</div>

After that just add an option to fullpage.js

normalScrollElements: '#scroll-area'

And that’s all you have area that can be scrolled inside fullpage.js section

Upvotes: 0

Alvaro
Alvaro

Reputation: 41595

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>

Upvotes: 3

Ruben Marrero
Ruben Marrero

Reputation: 1392

Your issue comes from scrollOverflow: true . It might mean your are missing slimScroll . You've got full details here.

Calling something on unknown means the object you need haven't been defined yet at usage time. It might be wise to use:

$(document).ready(function(){ /*code*/ });

To avoid problems. Although it doesn't fix your current issue.

-- EDIT bcs of -1 => Still proud of my anser. #EOF

Upvotes: -1

m1kael
m1kael

Reputation: 2851

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.

Upvotes: 1

Related Questions