How to use

Nicescroll is design to be easy to implement on your site.

You can add nicescroll at main page or every scrollable div, it could do the magic, but there is some situations when same change on your code is required.

It works only on site with jquery (version 1/2/3, not slim version).

When you want customize the page scrollbar and give modern taste to your site add this code at the end your page (before closing body tag) or at “ready” event.

$("body").niceScroll();

It’s better add nicescroll to body element, for old browsers or rare page layout you have to add to html element.

Changing cursor color and width is simple:

$("body").niceScroll({
cursorcolor:"aquamarine",
cursorwidth:"16px"
});

When your div size or position has constantly changed because you use a dynamic layout, it’s better use a wrapped div.

In normal condition you can add nicescroll to a scrollable div.
Nicescroll add custom scrollbar as absolute element of page (or main absolute container), actual DOM is very limited to detect element resize e repositioning so is possible to have a scrollbar position mismatch.
You can resolve this issue using wrapper div, then scrollbar has absolute positioned about content div.

To create a wrapped div, you have do add a content div into main scrollable div, such as:

<div class="nicescroll-box">
<div class="wrap">
[your scrollable content]
</div>
</div>

Add nicescroll to wrapped div need an additional parameter to specify the wrapped div.

$(".nicescroll-box").niceScroll(".wrap",{cursorcolor:"aquamarine"});

When you add nicescroll at content resized/hide/show from other libraries (such as jquery UI, infinite scrolling, etc…) in some situations you need to notify nicescroll when content change or div has modified/hide/show.

It’s simple:

$("<your div>").getNiceScroll().resize();

Call manually or bind to library events to notify changes.