FullPage.js scrollOverflow无法正确处理加载的内容

Question

I'm working on a full page site and decided to use the Fullpage.js plugin, but I am having some issues in terms of loading content via an AJAX request. I am populating the pages with JSON content and for some reason the scrollOverflow option is not working properly. What is more interesting is that it works perfectly fine in the XAMPP environment, but fails when it's in the live hosted environment (Bluehost). I have a feeling site resources aren't being loaded properly, but I'm not sure if that could/would cause the issue. There are no console errors, and all resources are being loaded.

Initialization:

$(document).ready(function() {
$.ajax({
    type: 'POST',
    url: 'content.json',
    dataType: 'json',
    contentType: "text/json; charset=utf-8",
    success: function(e) {
        $('.slide').each(function(index){
            console.log(index);
            $(this).children('.fp-tableCell').html('<span class = "center"><div class="circle-logo"><div class="circle-fill"><i class="'+e.platform[index].i+'"></i></div></div><h1 class = "montserrat">'+e.platform[index].h+'</h1><p class = "hind">'+e.platform[index].p+'</p><span>');
        });
        for(var i = 0; i<e.about.length; i++){
            $('#section2').children('.fp-tableCell').append('<h2 class = "montserrat">'+e.about[i].h+'</h2><p class = "hind">'+e.about[i].p+'</p>');
        }
        $('#section2').children('.fp-tableCell').append('<hr>');
        $('#section2').children('.fp-tableCell').append('<p class = "hind">CRAFTED BY DAVE | &copy; NATHAN</p>');
    },
    error: function(e){
        console.log(e);
    }
});

$('#downhint').click(function(){
    console.log('click');
    $.fn.fullpage.moveSectionDown();
});

$('#fullpage').fullpage({
    sectionsColor: ['transparent', '#021b80', '#FFF'],
    anchors: ['landing', 'platform', 'about'],
    menu: '#menu',
    scrollOverflow: true,
    slidesNavigation: true,
    afterLoad: function(anchorLink, index){

        $('.fp-table .active').css('overflow-y','auto');

        if(index == 1){
            $('#menu li:nth-child(1) a').addClass('active-link');
            $('#menu li:not(:nth-child(1)) a').removeClass('active-link');
        }
        if(index == 2){
            $('#menu li:nth-child(2) a').addClass('active-link');
            $('#menu li:not(:nth-child(2)) a').removeClass('active-link');
        }
        if(index == 3){
            $('#menu li:nth-child(3) a').addClass('active-link');
            $('#menu li:not(:nth-child(3)) a').removeClass('active-link');
        }

    }
});
$(window).scroll  
});

Includes:

    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'>
    <link href='css/bootstrap.min.css' rel='stylesheet' type='text/css'>
    <link href='fonts/genericons/genericons/genericons.css' rel='stylesheet' type='text/css'>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>

From what I can tell I have loaded all required files and scripts. Thanks in advance.

Answer 1

Based on your last comment. You need to call $.fn.fullpage.reBuild() just after loading the new content into the DOM structure.

This way fullpage.js will recalculate the content size and create the scroll bar when its necessary.

From the docs :

reBuild() Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site.