jquery scroll bar Plugin Nanoscroller usage Guide _jquery

Web site in the display of information, if the amount of data is too large, the solution is mainly three kinds of methods. 1. Pagination, the information pagination display. 2. Full page display, but the page is too long, affecting the browsing experience. 3. Using the scroll bar, the default scroll bar style is too single and the user experience is unfriendly. So we need to beautify the scroll bar.

The easiest way to beautify the scroll bar is to use the jquery plugin, which is the scroll bar plugin nanoscroller in the jquery plugin.

Official show, style can be customized

1.nanoscroller plug-in function

Implementing scrolling on Content

2.nanoscroller official Address

http://jamesflorentino.github.io/nanoScrollerJS/

3.nanoscroller Use method

1. Reference file

<script type= "Text/javascript" src= "jquery-1.9.1.js" ></script>
<script type= "Text/javascript" Src= "Jquery.nanoscroller.js" ></script>
<link rel= "stylesheet" href= "Nanoscroller.css" >

2. Define the scroll bar style

. Nano {background: #bba; width:500px height:500px; font-size:12px;font-family: Microsoft James Black; border-radius:8px;
Nano. Content { 
  padding:20px;
}
. Nano. Pane {
  background: #555;
  width:8px;
  right:1px;
 margin:5px
}
. Nano. Slider {
  background: #111;
}

3. Scrolling display content

<div id= "About" class= "nano" >
 <div class= "Content" > 
   scrolling contents
  </div>
</div >

The above mentioned is the entire content of this article, I hope you can enjoy.