jQuery Multiscroll Plugin (original) (raw)

Last Updated : 01 Aug, 2024

jQuery provides **multiscroll.js plugin which helps programmers to create split web pages along with divided multiple vertical scrolling panels.

**Note: Please download the jQuery multiscroll plugin to your working folder and include the required files in the head section of your code as shown below. Download "jquery.easings.min.js" file. Download "examples.css"

**Include jQuery multiscroll.js Plugin files:

**Example 1: In the following example, the **multiscroll plugin is demonstrated which results in split vertical scrolling of pages. Some of the basic option settings are done in the jQuery function of multiscroll plugin such as _loopBottom : true, _loopTop : true for looping effect. Other option like _scrollingSpeed : 1000 is set for managing speed parameters. The programmer can set the options based on the application's requirements.

html `

<link rel="stylesheet" type="text/css" 
      href="jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />

<script src=

"" title="undefined" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

• PHP slide
• MySQL slide
• jQuery slide

<div id="containerDivID">
    <div class="ms-left">
        <div class="ms-section" id="phpleftId">
            <h1>PHP Left </h1>
        </div>

        <div class="ms-section" id="mysqlleftId">
            <h1>MySQL Left </h1>
        </div>

        <div class="ms-section" id="jqueryleftId">
            <h1>jQuery Left </h1>
        </div>

    </div>

    <div class="ms-right">
        <div class="ms-section" id="phprightId">
            <h1>PHP Right </h1>
        </div>

        <div class="ms-section" id="mysqlrightId">
            <h1>MySQL Right </h1>
        </div>

        <div class="ms-section" id="jqueryrightId">
            <h1>jQuery Right</h1>
        </div>
    </div>
</div>

`

**Output:

**Example 2: In the following example, the **multiscroll plugin is demonstrated with some more option settings like _easing : 'easeOutBack'. Header and footer sections are also designed in the CSS part of the code along with padding option settings in the jQuery code as implemented.

html `

<link rel="stylesheet" type="text/css" 
      href="jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css"
      href="examples.css" />
<script src=

"" title="undefined" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

<script type="text/javascript">
    $(document).ready(function() {
        $('#containerDivID').multiscroll({
            sectionsColor: ['#008000', '#32CD32', '#90EE90'],
            anchors: ['php', 'mysql', 'jquery'],
            menu: '#menu',
            css3: true,
            navigation: true,
            navigationTooltips: ['php', 'mysql', 'jquery'],
            easing: 'easeOutBack',
            paddingTop: '100px',
            paddingBottom: '100px'
        });
    });
</script>

<style>
    #headerDivID,
    #footerDivID {
        position: fixed;
        width: 100%;
        height: 50px;
        display: block;
        text-align: center;
        background: #808080;
        z-index: 5;
        color: #e9e9e9;
        padding: 20px 0 0 0;
    }
    
    #headerDivID {
        top: 0px;
    }
    
    #footerDivID {
        bottom: 0px;
    }
    
    #menu {
        position: fixed;
        height: 50px;
        z-index: 50;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #menu li {
        display: inline-block;
        margin: 10px;
        color: #0000;
        background-color: #808080;
        background: rgba(255, 255, 255, 0.5);
        -webkit-border-radius: 12px;
    }
    
    #menu li a {
        text-decoration: none;
        color: #000;
    }
    
    #menu li.active {
        background-color: #696969;
        background: rgba(255, 255, 255, 1.5);
        color: #0000;
    }
    
    #menu li:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    
    #menu li.active a {
        color: #0000;
    }
    
    #menu li.active a:hover {
        color: #0000;
    }
    
    #menu li a,
    #menu li.active a {
        padding: 10px 15px;
        display: block;
    }
</style>

• PHP slide
• MySQL slide
• jQuery slide

<div id="containerDivID">
    <div class="ms-left">
        <div class="ms-section" id="phpleftId">
            <h1>Left1 </h1>
        </div>

        <div class="ms-section" id="mysqlleftId">
            <h1> Left2 </h1>
        </div>

        <div class="ms-section" id="jqueryleftId">
            <h1> Left3 </h1>
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section" id="phprightId">
            <h1>Right1 </h1>
        </div>

        <div class="ms-section" id="mysqlrightId">
            <h1>MySQL Right2 </h1>
        </div>

        <div class="ms-section" id="jqueryrightId">
            <h1>jQuery Right3</h1>
        </div>
    </div>
</div>

`

**Output: