2WDScroll — jQuery plugin for implementing Double Scrollbars
Have you ever wanted to have two vertical scrollbars in both top and bottom of an HTML element ?
Recently I added a DIV to a grid having limited horizontal space while inner content of same DIV is wide and with an extra height. It needed to set CSS overflow rules to have scrollbars for it accordingly.The main concern I had is users have to scroll left-right (scroll horizontally) to see wider content, but by default the horizontal scrollbar is available at the bottom of DIV.
But as I said before that DIV was with extra height, so users have to scroll down to reach the horizontal scrollbar, then top part of the div was not visible in screen. In such case users have to use horizontal scrollbar at bottom to navigate left or right without seeing the content area they intend to see, then use vertical scrollbar to go up.
As a solution I searched for available options for having a secondary horizontal scrollbar and found about jQuery DoubleScroll plugin . It works fine and same as I wanted, but in my case bottom scrollbar was misaligned within a bootstrap grid. Then I went for a custom solution mentioned by Dario Digregorio in this stackoverflow thread .
After resolving my requirement, I thought it is ideal to have the same solution wrapped as a jQuery plugin. The end result is available at github repository 2WDScroll .
Anyone interested in using the 2WDScroll jQuery plugin can download scripts from github repository 2WDScroll , or alternatively use the CDN (see below examples). Don’t forget to load jQuery before loading 2WDScroll plugin.
HTML Part
<div id="xId" >
<h5>Surface of the Sun</h5>
<img src="https://www.universetoday.com/wp-content/uploads/2020/01/Sun_surface-2000x1200.jpg" height="400"/>
<p> <small>Source: <a href="https://www.universetoday.com/144808/this-is-the-highest-resolution-image-ever-taken-of-the-surface-of-the-sun/" target="_blank">https://www.universetoday.com/144808/this-is-the-highest-resolution-image-ever-taken-of-the-surface-of-the-sun/</a></small></p>
</div>
Step 01 : How to load
Option 1
Download script from github repository 2WDScroll .
Copy scripts to your development folder.
Load either of 2wdScroll.js or 2wdScroll.min.js after loading jQuery.
<script src="path_to_script_folder/2wdScroll.min.js"></script>
Option 2
Load from CDN jsDelivr .
Load either of 2wdScroll.js or 2wdScroll.min.js after loading jQuery.
<script src="https://cdn.jsdelivr.net/npm/2wdscroll@1.0.0/2wdScroll.min.js"></script>
Rest is simple.
Step 02 — Initiating 2wdScroll
Using jQuery, select which element (by ID) or elements (by class or any other selector ) you need to have doubled scrollbar and call the plugin constructor like below, when relevant elements are ready (on $(document).ready() or other (if elements are loaded dynamically).
TwoWDSCroll() scroll accepts two parameters, the first is the desired fixed width with the element which is going to be attached with 2WDScroll, the second parameter is optional and it gets the desired minimum width of the same element.
<script>
$( document ).ready(function() {
$('.ts').TwoWDScroll(200); // Here a group of elements are selected by class name
$('#xId').TwoWDScroll(250,245); // Here an element is selected by its ID
});
</script>
The plugin is released under GNU GENERAL PUBLIC LICENSE and collaboration on further improvements is appreciated.
