FullPage.js scrollOverflow 无法与加载的内容一起正常工作答案

【问题标题】：FullPage.js scrollOverflow not working properly with loaded contentFullPage.js scrollOverflow 无法与加载的内容一起正常工作
【发布时间】：2015-04-26 20:14:12
【问题描述】：

我正在开发一个完整页面的网站并决定使用 Fullpage.js 插件，但我在通过 AJAX 请求加载内容方面遇到了一些问题。我正在使用 JSON 内容填充页面，由于某种原因，scrollOverflow 选项无法正常工作。更有趣的是，它在 XAMPP 环境中运行良好，但在实时托管环境（Bluehost）中却失败了。我感觉网站资源没有正确加载，但我不确定这是否会/会导致问题。没有控制台错误，正在加载所有资源。

初始化：

$(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  
});

包括：

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

据我所知，我已经加载了所有必需的文件和脚本。提前致谢。

【问题讨论】：

定义你所说的“scrollOverflow 选项不能正常工作”。
我的内容垂直溢出（y 轴）。未创建滚动条，因此该部分中的内容不可滚动。内容是通过从第 2 行开始的 AJAX 请求生成的。我需要让滚动条进行初始化并使内容可滚动。 @阿尔瓦罗

标签： javascript jquery ajax fullpage.js slimscroll

【解决方案1】：

根据您的最后评论。在将新内容加载到 DOM 结构后，您需要调用 $.fn.fullpage.reBuild()。

这样 fullpage.js 将重新计算内容大小并在必要时创建滚动条。

来自the docs：

重建（） 更新 DOM 结构以适应新的窗口大小或其内容。 非常适合与 AJAX 调用结合使用或网站 DOM 结构的外部更改。

【讨论】：