jQuery has poweful plugin to create divided multi scrolling by using multiscroll.js. Here i am going to define how to use it and how to scroll panels vertically.
You need jquery, multiscroll library.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Multiscroll.js</title>
- <link href="http://demo.expertphp.in/css/bootstrap.css" rel="stylesheet">
- <link href="http://demo.expertphp.in/css/jquery.multiscroll.css" rel="stylesheet">
- <script src="http://demo.expertphp.in/js/jquery.js"></script>
- <script src="http://demo.expertphp.in/js/jquery-ui.min.js"></script>
- <script src="http://demo.expertphp.in/js/jquery.multiscroll.js"></script>
- </head>
- <body style="background: #e1e1e1;">
- <ul id = "expertmenu">
- <li data-menuanchor = "firstSlide"><a href = "#firstSlide">First slide</a></li>
- <li data-menuanchor = "secondSlide"><a href = "#secondSlide">Second slide</a></li>
- <li data-menuanchor = "thirdSlide"><a href = "#thirdSlide">Third slide</a></li>
- </ul>
- <div id = "myContainer">
- <div class = "ms-left">
- <div class = "ms-section">
- <h1>Left 1</h1>
- </div>
- <div class = "ms-section">
- <h1>Left 2 </h1>
- </div>
- <div class = "ms-section">
- <h1>Left 3</h1>
- </div>
- </div>
- <div class = "ms-right">
- <div class = "ms-section">
- <h1>Right 1</h1>
- </div>
- <div class = "ms-section">
- <h1>Right 2</h1>
- </div>
- <div class = "ms-section">
- <h1>Right 3</h1>
- </div>
- </div>
- </div>
- <script type = "text/javascript">
- $(document).ready(function() {
- $('#myContainer').multiscroll({
- sectionsColor: ['#1bbc9b', '#5B6873', '#447198'],
- anchors: ['firstSlide', 'secondSlide', 'thirdSlide'],
- menu: '#expertmenu',
- navigation: true,
- navigationTooltips: ['1', '2', '3'],
- loopBottom: true,
- loopTop: true
- });
- });
- </script>
- </body>
- </html>
Click here to see demo :
