multiScroll.js: jQuery plugin to create multi-scrolling sites with two vertical layouts


View demo

Although there are many jQuery plugins out there, there’s space for more yet!
This time I found a couple of sites using this new kind of multi-directional scroll and as didn’t find any script to do it, I decided to make it by my own.

Some sites using this kind of navigation are:

multiScroll.js is the name I chose for this plugin. Its aim is to facilitate the creation of multi-scrolling websites with two vertical panels or layouts scrolling in opposite directions. A great way to catch the visitor attention with an original page.

It is quite similar to one of my previous plugins, fullpage.js, from which I’ve taken part of the code. This way the task was much faster this time. It only took me one day to get the beta version.


View demo

How to use it

The needed HTML markup is the following:

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section">Section 1 Left</div>
        <div class="ms-section">Section 2 Left</div>
        <div class="ms-section">Section 3 Left</div>
    <div class="ms-right">
        <div class="ms-section">Section 1 Right</div>
        <div class="ms-section">Section 2 Right</div>
        <div class="ms-section">Section 3 Right</div>

To initialize the plugin all you need to do is including the needed js and css files and call the plugin inside a `$(document).ready` function using the selector which will be used as a wrapper.

$(document).ready(function() {

Documentation & Questions

For more documentation about the plugin, check the github repository.
I encourage you to use the issues forum to report bugs or ask any question related with the plugin.
Also, don’t forget to search for your question before opening a new thread as they might have been already asked previously.

Donations admited

If anyone is so kind to invite me for a coffee I will appreciate it a lot :)

  • XtremeChaos

    Great plugin, thanks for sharing, but still i have one question, is there any possibility that in near future this plugin will get option for one full page scroll and split scroll for every page ? I mean like first page full page scroll , second and third split scroll and last one full page again, or so. Thanks again!

    • Alvaro

      I’m afraid this won’t work that way.

      • XtremeChaos

        Ok, thanks for your fast response and again thanks for this great plugin, but i will still need to find a solution

        • XtremeChaos

          I have managed to do this very simply, left side it’s with background image, width 200% and position absolute and right side it’s with background transparent and empty, works like a charm!

          • Alvaro

            Great :)

          • Voxs

            hehe, such quite easy simple solution – pls show one xample?

  • Martys

    Thanks a lot for this plugin!

    I have one question, is there a
    possibility to scroll automatically through the sections, maybe next
    section after 2 seconds and stop at mouse movement?

    • Alvaro

      Yeah of course. Just use your knowledge of javascript and apply it inside a callback such as `afterRender` by using setTimeout and the public method `moveSectionDown`.

      Take a look at this answer in the github forum of my other plugin (fullpage.js). The procedure is exactly the same:

      If you don’t understand it, please open a topic in the forum. This is no place to add code.

  • Voxs

    i like jquery.fullPage.js and would like use multiScroll.js too.

    But i think i recognised one little inconsistency – if using keyboard arrow nav. it seems (with TenFourFox) the first window-fitting sections will not fit properly after or it display stepwise but not as before … (sry f my lang) – may this depend on lack of browsers capabilities, that nav by keyboard is allready implemented i guess?

    anyway, such pretty devolepments here, thx a lot! Cheers, Voxs

    • Alvaro

      Can you explain your problem in another way? I don’t understand what you mean.

      • Voxs

        Hello Alvaro, thanks for your question. i will describe it by using a picture, just a second:

        ok – 1. if i use “multiscroll-nav” dots on the right the sections vertically change fine as expected, fitting the browser window – 2. if using keyboard arrow to navigate down and up again, there is seen a part of the following section at the bottom. Please have a look at this sample pic comparing 1. on the left, 2. on the right : thanks!

        • Voxs

          ? please whats now?

  • Dean

    Is there a way to constrain this to a section rather than the full height of the browser? I’ve tried using position: on containers and changing the windowHeight to target a div but that also doesn’t work.

    • Rajeesh

      @Dean? found any solution to constrain to a section?

      • Alvaro

        @disqus_GiChezg2Su:disqus the plugin doesn’t offer that possibility. It is a fullpage plugin. But you can try to overwrite the `height` value for sections as detailed here:

  • luca2715

    Hello, I would like to use multiScroll.js in connection with wow.js. I would like to have the wow.js animation activated when the mouse scroll and change the section, but it works only on the first anchor. There’s a way to make it works also on the other sections?

    • Alvaro

      Nop, you should make use of the available callbacks provided by the plugin.

  • IG Design

    Thanks a lot for this plugin and thanks for sharing!!! :)

    • IG Design

      Ops rong post, i use fullPage.js. :)

  • Jewels

    Hi, very nice plugin. I’m new to query so I was wondering how to get current page num when scroll is done to a certain page in afterLoad: function() { anotherFunction(pageNum {} )}

    • Alvaro

      You can use the callback `afterLoad` and use there you will be able to get the `index` parameter.

      More in the docs:

      • Jewels

        Thanks, I’ve tried the following: afterLoad:
        function(index) {

        and well my function is not executed but alert is executed twice. After I scroll to each new page, alert is displayed two times.

  • jewels

    I was wondering if it’s possible and with what plugin to implement a horizontal slides inside main slides ?Like for example left panel slides off-screen and right panel become full screen and slides horizontally?

    • Alvaro

      Not possible with multiScroll.js

      • jewels

        Thanks for your answer.

        A sort like in you’re citing above when you click a link you scroll horizontally through project pictures. But probably it’s another page altogether…that loads

        • Alvaro

          multiScroll.js doesn’t offer that possibility. You would have to do it by your own.

  • kampfkuchen

    Is there a way to make this work with one background picture, which gets split into half? Or do I always have to cut the picture into two halves before?

    • Alvaro

      You have to do it by yourself.

      • kampfkuchen

        Thank you for your answer! But if i have two halves then the two halves will move, if the browser window is made smaller and the pictures do not fit together anymore.
        Don’t you use one picture on your demo page ?

        • Alvaro

          You have to deal with CSS for it. That doesn’t belong to this post or to this plugin. You should better ask somewhere else.

          • kampfkuchen

            Great! Thank you!!

  • Yuka

    Hello, i like this plugin, and i have a question: is possible to make a button to scroll down? I think about arrow, but i have no idea how to work with multiscroll’s js.

    • Alvaro

      Yeah, just use the methods provided by the plugin such as `moveSectionDown` or `moveSectionUp`. All detailed in the docs:

      If you don’t know how to use them, I would recommend you to ask in other places such as You need a basic knowledge of javascript and jQuery.

      • Yuka

        Awesome:) Thank you!

  • sandeep joel

    I have doubt ,,is it possible to use background images in the sections color instead of just the plain color?

    • Alvaro

      Yep, use CSS for it. Take a look at the available examples.

    • Alex Scott

      Check out one of my sites using this @ – pictures as sections backgrounds, etc.

  • Alex Scott

    Now this is a good plugin, which I’m currently in the process of adapting to make my own version. I am using the plugin in production @ Three of the links you have above either don’t work or don’t use multiscroll anymore. Feel free to add my site to your list ;)

  • derrick

    i have tried to make responsive, but mobile touch screen device cannot scroll up and down.

    @media only screen and (max-width : 800px) {

    body, html { overflow: visible !important; }
    .ms-left, .ms-right { width: 100% !important; position: static !important; }


    • Alvaro

      The plugin doesn’t provide any option for it I’m afraid. And i won’t work the way you are trying to do so.

      • Shubham

        Hi alvarotrigo,
        Thanks for your plugin.But non-responsive thing is a very big drawback for this plugin.Please tell us if there is any way to make it responsive.
        I created this in multiscroll.

        • Alvaro

          As I said,the library doesn’t provide any help for that. You would have to do it on your side. I haven’t worked in this library in a long time and not planning to do so in a short term.

          • Shubham

            Thanks for your quick reply.I am trying to add some jquery and css code
            to destroy() multiscroll on small devices and adding some other
            Thanks again for such great plugin. :)

  • Yogendra Karekar

    Hi alvaro, gr8 plugin….!!!

    but the right side lags and works late..

    i am trying to implement this plugin with bootstrap.

    I have used a full page bootstrap carousel. and I implemented two carousels on left side and right side which apperas as one

    I used the same solution implemented here

    this is what i have implemented

    if you see the carousel lags and is not working properly or is should say the carousels are not synching well …..what can be done…please help me

    • Alvaro

      Use the option `css3:true` for a better performance. It will falllback to jQuery animations if CSS3 is not supported.
      I’ll update the default value for it in the next version.

  • Victor Martins

    How to use normalScrollElements? The element can be any part of the document?

  • renat natanael

    sir. how to swith the rotation. i mean by the dafault ms-left will go to top and ms-right will go to bottom. can it swtich?

    • Alvaro

      You just can’t.

  • Davide Rocchi

    Hi, first of all thank you for your plugin.
    Is it possible to embed it in a div that has margins all around, and keeping text inside ms-section vertically centered relatively to the div (and not to the ms-section)?

    Thank you!

    • Alvaro

      Probably not, but try it yourself and see. Usually you want to create inner containers and keep the multiscroll container as the only outer one.

  • Sibichan

    Hi, I just tried with multiscroll with bootstrap.But i wanted to disable this plugin in mobile. How to do that?