Nice Scrollbar is a jQuery-based responsive slider, for PC and smartphones (touch events). It’s slim modern, easy to blend, and easy to use. Tested on Firefox / Chrome / Maxthon / iPhone / Android. Very light <7ko min.js and <1Ko min.css.
Nice-Scrollbar is an easy-to-use jQuery plugin that attaches a cross-browser and highly customizable slider to a specific scrollable container.
custom scrollbar for all browsers, jquery custom scrollbar plugin, jquery custom scrollbar plugin malihu, jquery custom scrollbar demo, jquery smooth custom scrollbar
information:
- It grows up when the mouse is next to it.
- Scrolling at work on a smartphone using the search tool on the div that needs scrolling.
- Automatic adaptive scrolling even if the content appears later.
- You can use the mouse on the computer to move the scroll bar.
- You can click inside the slider to quickly move up or down.
- You can use the mouse scroll button to scroll the content.
- You can click the bar to quickly page up or down.
- You can use scroll content within scroll content.
- Pixel perfect.
- Zoom browser support.
- Add “scroll strength” by scrolling further on the extreme position (up or down) when one scrolling element is secondary to another. (Option) (enabled by default)
A Lightweight Custom Scrollbar Library In Vanilla Javascript | MiniBar
How to make use of it:
1. Load jQuery library and different required sources within the HTML web 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 information within the HTML web 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 customized 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 choices.
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,
});Slim Cross-platform Custom Scrollbar Plugin, Nice-Scrollbar Github, custom scrollbar library, custom scrollbar jquery codepen
See Demo And Download
Official Website(Ti-R): Click Here
This superior jQuery/javascript plugin is developed by Ti-R. For extra Advanced usage, please go to the official website.
