Skip to content
A jQuery plugin that duplicate the bottom scrollbar of an element to its top
HTML JavaScript
Branch: master
Clone or download
avianey Merge pull request #14 from coliff/patch-1
Update jQuery to latest version of v1.x and load over HTTPS
Latest commit 1ac11ef Jul 22, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information. Update Mar 14, 2014
bower.json Added bower.json to library Mar 31, 2017
example.html Update jQuery to latest version of v1.x and load over HTTPS Jul 8, 2019
jquery.doubleScroll.js Don't use inline styles for height Oct 10, 2018

jQuery DoubleScroll Plugin

A Simple jQuery plugin to display additional scrollbar on top of the element.
This plugin does not requires jQuery-UI


Call the doubleScroll function on the desired jQuery elements on page load :

$(document).ready(function() {


You can configure the double scroll with the following options :

	contentElement: undefined, // Widest element, if not specified first child element will be used
	scrollCss: {                
		'overflow-x': 'auto',
		'overflow-y': 'hidden'
	contentCss: {
		'overflow-x': 'auto',
		'overflow-y': 'hidden'
	onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
	resetOnWindowResize: false // recompute the top ScrollBar requirements when the window is resized

The element to use as the scroll reference.
First child element is used if nothing is specified.


Key-Value pairs that allow you to customize the top scrollbar CSS.


Key-Value pairs that allow you to customize the content CSS.


If true, will display the top scrollbar only if the content is scrollable...


If true, will attach an event to regenerate the top scrollbar when the window is resized.
Use it when the scrollable element has a width which is relative to the window width.


Dual licensed under the MIT and GPL licenses:


You can’t perform that action at this time.