In this tutorial we will learn to change the scroll bar that comes by default in our browsers, using NiceScroll.
The scroll bar that bring the web browsers, not be entirely pleasant in most of these and we feel the need to want to change the style, NiceScroll is a tool that helps us to give it another go , rather than a tool is a plugin based on jQuery . Then we will see how it is used:
Installation:
Downloaded jQuery, is found on its official website: Download jQuery here . It must be downloaded from version 1.5x and later.
We download the plugin NiceScroll found on GitHub: Download NiceScroll here .
We create an HTML document in JavaScript scripts section of our paper and then put jQuery plugin NiceScroll , using the "script" element, respecting that order for proper operation.
<! DOCTYPE html>
< html >
< head >
< title > </ title >
</ head >
< body >
<! - JS Scripts -->
< script type = " text/javascript " src = " js/jquery-2.1.4.min.js " > </ script >
< script type = " text/javascript " src = " jquery.nicescroll.min.js " > </ script >
</ body >
</ html >
In this way we have installed or in any case loaded the plugin NiceScroll to start.
How to change the Scroll Bar?
We create a container in our html file using the "div" element, we added a container class, we set CSS styles, only for the case of this example, giving a height of 900px, a width of 50% and a color to the element container class; then we headed to the section scripts and use the "script" element to add jQuery code, which initiates the call when all the html document and css files have been loaded with the line of code $ (document) .ready () then the function is initialized niceScroll () selecting the html tag that allow the nicescroll effect especially occurs html document.
<! DOCTYPE html>
< html >
< head >
< title > </ title >
< style type = " text/css " >
. contenedor {
width : 50 % ;
height : 900px ;
background - color : yellow ;
}
</ style >
</ head >
< body >
< div class = " contenedor " >
</ Div >
<! - JS Scripts -->
< script type = " text/javascript " src = " js/jquery-2.1.4.min.js " > </ script <span style="color:rgb(248, 248, 242)"