CODEWITHSUNDEEP
fullpage.js
Aerra
Aerra

Reputation: 84

fullpage.js dynamically added sections: how to scroll inside the sections

I am adding the sections in HTML using JS from this object:

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

like this:

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

which results in the following 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>

Simple enough.

Here's the fullpage configuration:

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,
                },
            });

My problem is that I cannot scroll inside any div that's scrollable and is inside <div class="section"></div>, even though scrollOverflow: true is set, and I added the files in the correct order in the HTML. Any idea what might cause this issue and how to solve it?

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

Upvotes: 0

Views: 575

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You might need to use the method fullpage_api.reBuid() right after appending a section. Try it out.

That, or initialise fullPage.js after appending the contents.

In any case, fullPage.js won't be able to detect new sections appended dynamically, you would have to put some more work from your part to make it work. Namely, destroying fullPage.js and initialising it again with every section/slide you add/remove dynamically.

Upvotes: 1

Related Questions