DoubleScroll using Jquery

In this article, we will understand the Doublescroll jquery plugin. This plugin creates an additional scrollbar on the top of the scrollable container when the bottom scrollbar is present. It also has the ability to recompute the top scrollbar's size each time the window is resized.

What is Scroll bar?

A scroll bar is used to determines the direction in which scrolling occurs when the user operates the scroll bar.

There are types of Scrollbar:

Horizontal Scroll bar: A horizontal top or bottom scroll bar is used to scroll the content of a page either left or right.
Vertical Scroll bar: A vertical left or right scroll bar is used to scroll the content of page either top or down.

Following are the examples of Doublescroll jquery plugin.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of Doublescroll jquery plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
.dashbd-tab.table th {
  min-width: 180px;
  color: #bb90d1;
  vertical-align: middle !important;
}
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
dashbd-tab.table td {
  min-width: 180px;
  color: #bb90d1;
  vertical-align: middle !important;
}
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
  line-height: 1;
  margin: 10;
  text-align: center;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
background: linear-gradient(130deg, #07d9a3, #048fee);
  -webkit-animation: gradient 16s ease infinite;
  -moz-animation: gradient 16s ease infinite;
  animation: gradient 16s ease infinite;
}
.dashbd-tab.table th:first-child  {
  min-width: 140px;
  padding-left: 30px;
}
.dashbd-tab.table td:first-child {
  min-width: 140px;
  padding-left: 30px;
  font-family: Helvetica, Arial, sans-serif;
}
.dashbd-tab {
  border: 1px solid #ddd;
  border-radius: 6px;
}
.dashbd-tab.table th { color: #dc3545;
  font-weight: 800;
  font-size: 24px;
  border-bottom: 1px solid #EEF0F1;
  font-family: Helvetica, Arial, sans-serif;
}
.dashbd-tab.table td {
  color: #bb90d1;
  font-weight: 500;
  border-bottom: 1px solid #E8EAED;
  font-size: 14px;
}
h2 {
   font-weight: 200;
  font-size: 20px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: green;
  letter-spacing: 2px;
   text-align: center;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  color: white;
  font-weight: 200px;
    background: #000000;
}
.fixed-scroll {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 999;
  background: #fff;
}
</style>
<body>
<h1> Example </h1>
<h2> Double scrollbar using Jquery Plugin </h2>
<div class = "table-responsive dashboard-table">
                <table class = "table">
                   <thead>
                       <th> Sr.No </th>
                       <th> Name </th>
                       <th> English </th>
                      <th> Maths </th>
                       <th> Punjabi </th>
                       <th> Science </th>
                       <th> SST </th>
                       <th> Sanskrit </th>
                       <th> GK </th>
                       <th> Hindi </th>     
                   </thead>
                   <tbody>
                   <tr>
                       <td>    
                             1
                        </td>
                       <td> Ahmad </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
                   <tr>
                       <td>
                         2
                        </td>        
                       <td> Monty </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                    </tr>
                   <tr>
                       <td>
                         3
                        </td>
                       <td> Lily </td>
<td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>     
                   </tr>        
<tr>
                       <td>    
                             4
                        </td>
                       <td> Ahmad </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
                     <tr>
                       <td>    
                             5
                        </td>
                       <td> Ahmad </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
             <tr>
                       <td>    
                             6
                        </td>
                       <td> Raghu </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
                     <tr>
                       <td>    
                             7
                        </td>
                       <td> Etender </td>
                       <td> 18 </td>
                       <td> 5 </td>
                       <td> 15 </td>
                       <td> 30 </td>
                       <td> 20 </td>
                       <td> 40 </td>
                       <td>32 </td>
                       <td> 25 </td>      
                   </tr>
<script>
$(document).ready(function() {
	  $('.dashboard-table').doubleScroll( {
	    resetOnWindowResize: true
	  });
	    var s = $(".doubleScroll-scroll-wrapper");
		var pos = s.position();					   
		$(window).scroll(function() {
			var windowpos = $(window).scrollTop();
			if (windowpos >= pos.top) {
				s.addClass("fixed-scroll");
			} else {
				s.removeClass("fixed-scroll");	
			}
		});	  
	});
  (function( $ ) {
 	jQuery.fn.doubleScroll = function(userOptions) {
		var options = {
			ce: undefined,
			scrollCss: {                
				'overflow-x': 'auto',
				'overflow-y': 'hidden'
			},
			contentCss: {
				'overflow-x': 'auto',
				'overflow-y': 'hidden'
			}, 
		};
		$.extend(true, options, userOptions);
	$.extend(options, {
			topScrollBarMarkup: '<div class = "doubleScroll-scroll-wrapper" 
			style = "height: 20px;"> <div class = "doubleScroll-scroll" 
			style = "height: 20px;"> </div> </div>',
			topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
			topScrollBarInnerSelector: '.doubleScroll-scroll'
		});
		var _showScrollBar = function($self, options) {
			if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
				$self.prev(options.topScrollBarWrapperSelector).remove();
				return;
			}
			var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
			if ($topScrollBar.length == 0) {
				$topScrollBar = $(options.topScrollBarMarkup);
				$self.before($topScrollBar);
				$topScrollBar.css(options.scrollCss);
				$self.css(options.contentCss);
				$topScrollBar.bind('scroll.doubleScroll', function() {
					$self.scrollLeft($topScrollBar.scrollLeft());
				});
				var selfScrollHandler = function() {
					$topScrollBar.scrollLeft($self.scrollLeft());
				};
				$self.bind('scroll.doubleScroll', selfScrollHandler);
			}
			var $ce;		
			if (options.ce !== undefined && $self.find(options.ce).length !== 0) {
				$ce = $self.find(options.ce);
			} else {
				$ce = $self.find('>:first-child');
			}
				$(options.topScrollBarInnerSelector, $topScrollBar).width($ce.outerWidth());
			$topScrollBar.width($self.width());
			$topScrollBar.scrollLeft($self.scrollLeft());	
		}
		return this.each(function() {
			var $self = $(this);
			_showScrollBar($self, options)
			if (options.resetOnWindowResize) {
				var id;
				var handler = function(e) {
		           	_showScrollBar($self, options);
				};
				$(window).bind('resize.doubleScroll', function() {										
				clearTimeout(id);
			id = setTimeout(handler, options.timeToWaitForResize);
				});
			}
		});
	}
} ( jQuery ));
</script>
</body>
</html>

Explanation:

In the above example, we created an example of double scrollbar in HTML table by using jquery. In this, we created a double horizontal scroll bar. The first scroll bar appears at top of the content and another scroll bar appears at bottom content. Content should be moved either left or right according to the scroll bar.

Output:

Following is the output of this example.