Change scrollOverflow to false in fullpage.js when modal is open

I'm using fullpage.js and bootstrap. I need to be able to scroll, and it works fine using this:

$.fn.fullpage({
    scrollOverflow: true,
}

The problem is when I use Bootstrap modal. I'd like to be able to scroll the modal overlay and not scroll the body underneath. So, my question is, if it is possible to change scrollOverflow to false when the modal is open.

I tried this:

$(document).ready(function() {

    $('.modal').on('shown.bs.modal', function() {
         $fn.fullPage().setScrollOverflow(false);
    });

    $('.modal').on('hidden.bs.modal', function() {
         $fn.fullPage().setScrollOverflow(true);
    });      

});

This doesn't work.

Answers


fullpage.js doesn't provide any option for it. You would need to do it by yourself.


Use afterRender callback

$('#fullpage').fullpage({
    afterRender: function(){
        $('.modal')
            .on('shown.bs.modal', function() {
                $fn.fullPage().setScrollOverflow(false);
            })
            .on('hidden.bs.modal', function() {
                $fn.fullPage().setScrollOverflow(true);
            });
    }
});

Just add normalScrollElements:'.modal' to the function...

$('#rp-wrapper').fullpage({
    anchors: ['Intro', 'AboutMe'],
    sectionsColor: ['#D6ECFF', '#1BBC9B'],
    normalScrollElements: '.modal',
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Intro', 'About Me']
});

Need Your Help

Not same height menu bar in chrome, firefox and ie

html css internet-explorer google-chrome firefox

I've been working on a site with a top menu bar. In Chrome it works like a charm, but when I open it on Firefox or IE the height of the sub menus aren't the correct size. Link to website: Old link

ExtJS: Combobox in EditorGridPanel not selecting the desired item (with test case)

extjs

I'm using ExtJS to create an EditorGridPanel with a combobox for an editor in a cell.