jquery scroll bar Plug-in Nanoscroller usage guide

Source: Internet
Author: User

jquery scroll bar Plug-in Nanoscroller usage guide

This article introduces the NANOSCROLLERJS is a simple way to implement the Mac OS X Lion System scroll bar effect of the jquery plug-ins. The scroll bar plug-in uses native scrollbars to work on the IPad, IPhone, and some Android tablets.

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

?

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

2. Define the scroll bar style

?

1 2 3 4 5 6 7 8 9 10 11 12-13 . Nano {background: #bba; width:500px height:500px; font-size:12px;font-family: Microsoft James Black; border-radius:8px; Nano. Conten t {padding:20px; nano. Pane {background: #555; width:8px; right:1px; margin:5px}. Nano. Slider {background: #1 11; }

3. Scrolling display content

?

1 2 3 4 5 <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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.