WCAG Compliant Custom Scrollbar Plugin For jQuery - Scrollbox

scrollbox is an accessible and touch-enabled jQuery scrollbar plugin that creates a custom scrollbar on a scrollable element that is consistent across browsers, and is WCAG 2.0 compliant.

How to use it:

1. Link jQuery and the scrollbox plugin's script into your webpage by copying the following code snippets into your site:

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

2. Call the function on the target element and we're done.

$('.content').scrollbox();

3. Customize the track and handle of the scrollbar by overriding the following CSS styles:

$('.content').scrollbox({
  track: {
    border:'1px solid #000000',
    width: '8px',
    height: (height - 2) +'px',
    position: 'absolute',
    top: '0',
    right: '0',
    borderRadius: '5px',
    opacity: 0.3
  },
  handle: {
    background: '#000000',
    width: '8px',
    height: handleHeight +'px',
    cursor: 'pointer',
    borderRadius: '4px',
    transition: 'margin 85ms'
  }
});

4. Destroy the plugin and remove all the scrollbars from DOM.

$('.content').scrollbox('destroy');

---

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