Slick Custom Scrollbar Plugin with jQuery
File Size: | Unknown |
---|---|
Views Total: | 7603 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Slick Custom Scrollbar is a very simple jQuery script to create slick and touch-compatible scrollbar for your long content. Slick Custom Scrollbar lets you replace the default browser scrollbar on long content with a custom one instead, styled using pure CSS. Easily modify the look of the scrollbar using all the power afforded to you by CSS, whether it's giving it a background image, rounded corners, CSS3 shadows, or changing its thickness etc.
How to use it:
1. Download and include the jQuery slickcustomscroll.js script after jQuery JavaScript library.
<script src="jquery.min.js"></script> <script src="slickcustomscroll.js">
2. The plugin also requires jQuery mousewheel plugin for mouse wheel support.
<script src="jquery.mousewheel.min.js"></script>
3. Insert your content into a DIV container with an unique rel=""
attribute.
<div rel="scrollcontent1"> <p id="paragraph-A">...</p> <p id="paragraph-B">...</p> <p id="paragraph-C">...</p> </div>
4. Set the height & width for the container.
div[rel='scrollcontent1'] { width: 60%; height: 280px; }
5. Initialize the plugin.
$("div[rel='scrollcontent1']").customscroll({ // horizontal or vertical direction: "horizontal", // an overscroll amount of around 10px bounce:10 });
6. The plugin will auto create 3 CSS classes: .scrollcontent1-content
, .scrollcontent1-bar
and .scrollcontent1-drag
. So you can style the scrollbar in the CSS. If rel is "scrollcontent1", style its scrollbar by referring to ".scrollcontent-content", ".scrollcontent-bar", etc.
.scrollcontent1-bar { width: 11px; background: #fffeda; border-radius: 4px; box-shadow: inset 0px 0px 5px #444444; overflow: hidden; } .scrollcontent1-drag { background: #ad5134; border-radius: 4px; cursor: pointer; }
6. Scroll to a specified part of your long content. The A HREF should have a rel attribute with the ID of the element that the script will scroll to on A HREF click.
<a href="#" rel="paragraph-A">Click to scroll...</a>
About author:
Author: Dynamic Drive
Plugin Homepage: http://www.dynamicdrive.com/dynamicindex11/scrollc.htm
This awesome jQuery plugin is developed by dynamicdrive. For more Advanced Usages, please check the demo page or visit the official website.