Double Scrollbar For Scrollable Container - jQuery DoubleScroll

DoubleScroll is a lightweight jQuery plugin that 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.

How to use it:

1. To use this plugin, just include the main JavaScript file jquery.doubleScroll.js after jQuery library:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.doubleScroll.js"></script>

2. Then call the function doubleScroll() on the scrollable container and done.

$('.element').doubleScroll();

3. Recompute the top ScrollBar requirements when the window is resized.

$('.element').doubleScroll({
  resetOnWindowResize: true
});

4. Set the time to wait for the last update event (useful when browser fires resize event constantly during resizing):

$('.element').doubleScroll({
  timeToWaitForResize: 30
});

5. Hide the top scrollbar if the bottom one is not present.

$('.element').doubleScroll({
  onlyIfScroll: true
});

6. Override the default CSS styles:

$('.element').doubleScroll({
  scrollCss: {                
    'overflow-x': 'auto',
    'overflow-y': 'hidden'
  },
  contentCss: {
    'overflow-x': 'auto',
    'overflow-y': 'hidden'
  },
});

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

$('.element').doubleScroll({
  contentElement: undefined
});

Changelog:

2021-01-21

• Fixed: Scrollbar appears when it shouldn't due to rounding error.

2019-11-28

• fixed infinite loop while scrolling

2018-10-17

• no longer uses CSS for height

---

This awesome jQuery plugin is developed by avianey. For more Advanced Usages, please check the demo page or visit the official website.