javascript - Scrollable div inside section of Fullpage.js doesn't work - Stack Overflow

admin管理员组

文章数量:1414628

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:

/

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

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

• javascript
• html
• css
• fullpage.js
• slimscroll

Share Improve this question Follow asked Apr 2, 2017 at 10:51 Claudiu CreangaClaudiu Creanga 8,4061313 gold badges7878 silver badges118118 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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 patible 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>

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">
    ...

bees

<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.

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

Your issue es 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

本文标签： javascriptScrollable div inside section of Fullpagejs doesn39t workStack Overflow