Multiple jQuery niceScroll plugin

Question

I have jQuery niceScroll setup, its working fine on the body, however I want to have different themed scrollbars on the same page. I have the following code:

Here is my fiddle: http://jsfiddle.net/JPA4R/135/

 <script>
  $(document).ready(function () {
    $("body").niceScroll({cursorcolor:"#267ec8", cursorwidth:"10px"});
    $("#test").niceScroll({cursorcolor:"#ffffff", cursorwidth:"5px"});
  });
 </script>

Link: http://areaaperta.com/nicescroll/

Body i want to have a blue scrollbar and on div i have i want the scrollbar to be white and thinner. However with the code above the one on the body is working but not the one on the div?

Is it possible to have multiple on the same page? Any help would be great, i am stuck and cannot see anything wrong with the above.

Thanks

Answer 1

From documentation:

4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:

$(document).ready(

  function() { 

      $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});

  }

);

In your fiddle exemple you are calling niceScroll this way:

$(".filterContainer").niceScroll({
    cursorcolor: "#ffffff",
    cursorwidth: "5px"
}); 

In your html code .filterContainer(content) is wrapped by #sidebar-wrapper(viewport) element.

So you have to modify the way how niceScroll is call. So, following what the documentation says:

$("#sidebar-wrapper").niceScroll(".filterContainer",{
    cursorcolor: "#ffffff",
    cursorwidth: "5px"
});  

Here a working example.