Question

我正在使用fullpage.js和bootstrap。我需要能够滚动，使用它可以正常工作：

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

问题是当我使用Bootstrap模式时。我希望能够滚动模态叠加层而不是滚动下面的主体。所以，我的问题是，如果可以在模态打开时将scrollOverflow更改为false。

我试过了：

$(document).ready(function() {

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

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

});

这不起作用。

Answer 1

使用afterRender回调

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

Answer 2

fullpage.js不提供任何选项。你需要自己做。

Answer 3

只需将 normalScrollElements:'.modal' 添加到该功能...

即可

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

当模态打开时，在fullpage.js中将scrollOverflow更改为false

3 个答案: