Slim Cross-platform Custom Scrollbar Plugin - Nice-Scrollbar

Nice-Scrollbar is a simple-to-use jQuery plugin that appends a cross-browser, highly customizable scrollbar to a given scrollable container.

Basic usage:

1. Load jQuery library and other required resources in the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/underscore-min.js"></script>
<script src="/path/to/jquery.mousewheel.min.js"></script>

2. Download and load the jQuery nice-scrollbar plugin's JavaScript and CSS files in the html page.

<script src="tr.scroll.js"></script>
<link rel="stylesheet" href="tr.scroll.css">

3. Create a scrollable container.

<div id="divParent">
  <div id="divInside">
  </div>
</div>

#divParent {

/* You need to set a size */
  height:152px;
  width:580px;

/* Enable the scrollbar to do not go over the text when growing */
  padding-right:10px;
  background:#777;
  color:#DDD;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  margin:20px;
  
}

#divInside {
  padding:5px;
}

4. Append a custom scrollbar to the container.

var gNiceScroll;
  
  // Function to add Nice Scrollbar
  function AddNiceScrollbar()
  {
    if( gNiceScroll )
      gNiceScroll.Remove();
    gNiceScroll = new TR.NiceScroll("#divInside");
    gNiceScroll.Add();
  }
  
  AddNiceScrollbar();

5. Customization options.

new TR.NiceScroll("#divInside",{

    // Minimum size for the inner scroller
    "ScrollInnerSizeMin": 20

    // Value to set to force scrolling 
    "ForceScrollingMax": 5

    // Enable to force scrolling 
    "EnableForceScrolling": true,

    // Sensibility Touch in px to consider a click
    "SensibilityTouch": true,
    
});

Changelog:

2018-03-12

• Version 1.3.8

---

This awesome jQuery plugin is developed by Ti-R. For more Advanced Usages, please check the demo page or visit the official website.