fullpage.js动态添加的部分：如何在部分中滚动

问题描述

我正在使用来自此对象的JS在HTML中添加各节：

var slidesArray = [
        {
            'id': 1,'title': '1 title',},{
            'id': 2,'title': '2 title',{
            'id': 3,'title': '3 title',{
            'id': 4,'title': '4 title',}
    ];

像这样：

var $container = $('#fullpage'),shuffledItems = "",shuffledItemstemplate =
                "<div class='section fp-scrollable'>" +
                    "<div class='section_title'>{TITLE}</div>" +
                "</div>";

    for(var i = 0; i < 3; i++) {
       shuffledItems = shuffledItemstemplate.replace(/{TITLE}/g,slidesArray[i]["title"]);

       $container.append(shuffledItems);
    }

这将产生以下HTML：

<div id="fullpage" class="sections">
    <div class="section fp-scrollable">
      <div class="section_title">1 title</div>
    </div>

    <div class="section fp-scrollable">
      <div class="section_title">2 title</div>
    </div>

    <!-- etc -->
</div>

很简单。

这是整页配置：

new fullpage('#fullpage',{
                css3: true,scrollingSpeed: 1000,navigation: true,slidesNavigation: true,controlArrows: false,scrolloverflow: true,// even though this is set to true,it's not working
                scrolloverflowOptions: {
                    scrollbars: false,});

我的问题是，即使设置了<div class="section"></div>，我也无法在可滚动且位于scrolloverflow: true内的任何div内滚动，并且我以正确的顺序在HTML中添加了文件。您知道什么可能导致此问题以及如何解决吗？

<script src="Scripts/Legacy/vendor/jquery.min.js"></script>
<script src="Scripts/Legacy/third-party/scrolloverflow.min.js"></script>
<script src="Scripts/Legacy/third-party/fullpage.js"></script>

解决方法

您可能需要在附加部分之后立即使用方法fullpage_api.reBuid()。试试吧。

那样，或者在附加内容之后初始化fullPage.js。

无论如何，fullPage.js将无法检测到动态追加的新部分，因此您必须从自己的部分进行更多工作才能使其正常工作。即，销毁fullPage.js并在您动态添加/删除的每个部分/幻灯片中再次对其进行初始化。