Question

我正在使用来自此对象的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>

Answer 1

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

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

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

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

1 个答案: