Slick Custom Scrollbar Plugin with jQuery

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.