scrollOverflow not working in fullPage.js

问题

I recently began using fullPage.js for a project, and I cannot figure out how to get the overflow scrolling to work. The last 'section' in my page runs long, and as such, needs vertical scrolling.

Here is the code I have inside my <head> tags:

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>      
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.fn.fullpage({
                anchors: ['top', 'brand-or-agency', 'contact-us'],
                fixedElements: '#header',
                resize: false,
                scrollOverflow: true,
                css3: true,
                paddingTop: 100,
                loopTop: false
            });
        });
    </script>

I am also using Bootstrap (including the JS), as well as jQuery validate.

Is there anything else I'm missing here to enable this feature?

回答1:

Is there anything else I'm missing here to enable this feature?

If i understand it correctly, all you are missing out on is the option called normalScrollElements. It is a class/id you define and then add to the div element.

    $(document).ready(function(){
        $.fn.fullpage({
            anchors: ['top', 'brand-or-agency', 'contact-us'],
            fixedElements: '#header',
            resize: false,
            scrollOverflow: true,
            css3: true,
            paddingTop: 100,
            loopTop: false,
            normalScrollElements: '#element, .element'

        });
    });

HTML

<div class='section element'> This section will scroll vertically </div>

As you can see the sectionSelector "section" still needs to be applied.

来源：https://stackoverflow.com/questions/20111272/scrolloverflow-not-working-in-fullpage-js

标签

jquery

html5

twitter-bootstrap

responsive-design

fullpage.js