jQuery scroll bar plug-in nanoscroller usage guide_jquery

When the website displays information, if the amount of information is too large, there are three main solutions. 1. Paging, display information in pages. 2. The entire page is displayed, but the page is too long, which affects the browsing experience. 3. Use scroll bars, but the default scroll bar style is too single and the user experience is not friendly. So we need to beautify the scroll bar.

The easiest way to beautify the scroll bar is to use the jquery plug-in. This article introduces the scroll bar plug-in nanoscroller in the jquery plug-in.

Official display, style can be customized

1. nanoscroller plug-in function

Implement scrolling function for content

2.nanoscroller official address

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

3. How to use nanoscroller

1. Reference files

<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 scroll bar style

.nano { background: #bba; width: 500px; height: 500px; font-size:12px;font-family:微软雅黑;border-radius:8px; }
.nano .content { 
  padding: 20px;
}
.nano .pane {
  background: #555;
  width: 8px;
  right: 1px;
 margin: 5px;
}
.nano .slider {
  background: #111;
}

3. Scroll displayed content

<div id="about" class="nano">
 <div class="content"> 
   滚动显示的内容
  </div>
</div>

The above is the entire content of this article, I hope you all like it.