jQuery | Multiscroll Plugin

Read

Discuss

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:

<link href=”jquery.multiscroll.css” rel=”stylesheet” type=”text/css”/>
<link href=”examples.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”jquery.easings.min.js”></script>
<script src=”jquery.multiscroll.js”></script>

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.

<!DOCTYPE html> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
  
<head> 
    <meta http-equiv="Content-Type" 
          content="text/html; charset = utf-8" /> 
    <title> jQuery Multiscroll Plugin</title> 
  
    <link rel="stylesheet" type="text/css" 
          href="jquery.multiscroll.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.css" /> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
  </script> 
    <script type="text/javascript" src="jquery.easings.min.js"> 
    </script> 
    <script type="text/javascript" src="jquery.multiscroll.js"> 
    </script> 
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $('#containerDivID').multiscroll({ 
                sectionsColor: ['#008000', '#32CD32', '#90EE90'], 
                anchors: ['php', 'mysql', 'jquery'], 
                menu: '#menu', 
                navigation: true, 
                navigationTooltips: ['php', 'mysql', 'jquery'], 
                loopBottom: true, 
                loopTop: true, 
                leftSelector: 'ms-left', 
                rightSelector: 'ms-right', 
                scrollingSpeed: 1000 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <ul id="menu"> 
        <li data-menuanchor="first"> 
          <a href="#php">PHP slide</a></li> 
        <li data-menuanchor="second"> 
          <a href="#mysql">MySQL slide</a></li> 
        <li data-menuanchor="third"> 
          <a href="#jquery">jQuery slide</a></li> 
    </ul> 
  
    <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> 
</body> 
  
</html> 

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.

<!DOCTYPE html> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
  
<head> 
    <meta http-equiv="Content-Type" 
          content="text/html; charset = utf-8" /> 
    <title> jQuery Multiscroll Plugin</title> 
  
    <link rel="stylesheet" type="text/css" 
          href="jquery.multiscroll.css" /> 
    <link rel="stylesheet" type="text/css"
          href="examples.css" /> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
  </script> 
    <script type="text/javascript" src="jquery.easings.min.js"> 
    </script> 
    <script type="text/javascript" src="jquery.multiscroll.js"> 
    </script> 
  
    <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> 
</head> 
  
<body> 
    <div id="headerDivID">GeeksforGeeks</div> 
    <div id="footerDivID">footer@GeeksforGeeks</div> 
    <ul id="menu"> 
        <li data-menuanchor="first"><a href="#php"> 
          <b>PHP slide</b></a></li> 
        <li data-menuanchor="second"><a href="#mysql"> 
          <b>MySQL slide</b></a></li> 
        <li data-menuanchor="third"><a href="#jquery"> 
          <b>jQuery slide</b></a></li> 
    </ul> 
  
    <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> 
</body> 
  
</html> 

Output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 27 Apr, 2020

How to Dynamically Add/Remove Table Rows using jQuery ?

How to keep compiled files in a separate directory ?

jQuery | Multiscroll Plugin

Please Login to comment...