How to make sections under multiscroll.js divs?

Question

I am using multiscroll.js example file.

    <body>

<ul id="menu">
    <li data-menuanchor="first"><a href="#first">First slide</a></li>
    <li data-menuanchor="second"><a href="#second">Second slide</a></li>
    <li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>

<div id="myContainer">

    <div class="ms-left">
        <div class="ms-section" id="left1">
            <h1>Left 1</h1>
        </div>

        <div class="ms-section" id="left2">
            <h1>Left 2 </h1>
        </div>

        <div class="ms-section" id="left3">
            <h1>Left 3</h1>
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section" id="right1">
            <h1>Right 1</h1>
        </div>

        <div class="ms-section" id="right2">
            <h1>Right 2</h1>
        </div>

        <div class="ms-section" id="right3">
            <h1>Right 3</h1>
        </div>
    </div>
</div>

</body>
</html>

What I want is to add few more divs under this #mycontainer div. like this

<div class="bar" id="foo">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus id 
possimus, nostrum mollitia dolores neque amet esse commodi facilis 

temporibus quisquam molestiae eligendi non ullam vitae et repellendus repellat velit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae voluptatum officia sint, omnis quibusdam labore. Illo, consequuntur aliquid saepe voluptates, nulla accusantium aspernatur in voluptatem minima a magnam nemo explicabo.
</div>

Is it possible to make a website in which multiscroll is limited to one specific div only. After that div is scrolled website behave like a normal website.

score 0 · Answer 1 · edited Jun 06 '19 at 14:50

I had the same need and I figured out with the use of the afterLoad() callback

    afterLoad: function(index){
        if(index == '3'){
            $('html, body').delay(1000).css('overflow', 'auto');
        } else {
            $('html, body').delay(1000).css('overflow', 'hidden');
        }
    }

Be sure to have this parameter normalScrollElements correctly setup like your div below the multiscroll

How to make sections under multiscroll.js divs?

1 Answers1