WCAG Compliant Custom Scrollbar Plugin For jQuery - Scrollbox
File Size: | 16.1 KB |
---|---|
Views Total: | 1427 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.