(Website profile)
What is Slimscroll?
Slimscroll is a small (4.6KB) JQuery plugin This transforms any div to a scrollable area with a nice Scrollbar.slimscrol L doesn ' t occupy any visual space as it is appears on a user initiated mouse-over. User can drag the scrollbar or use Mouse-wheel to change the scroll value.
Translation
What is Slimscroll?
Slimscroll is a 4.6kb jquery plugin that adds a good scroll bar to the content area of any div element package. Slimscroll does not occupy any visual space, it only appears in a user-initiated mouse. The user can drag the scroll bar or use the mouse wheel to change the scrolling value.
Plugin: https://github.com/rochal/jQuery-slimScroll/releases
Stable, fast, free, open source Project CDN Service: http://www.bootcdn.cn/jQuery-slimScroll/(click to view the latest plugin CDN address)
How to use:
1. Introduction of the jquery plugin (using Google CDN Service, 1.9.0 version):
1 <script type= "Text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/ Jquery.min.js "></script>
2. Introduce this plugin:
<script type= "Text/javascript" src= "yourjspath/jquery.slimscroll.min.js" ></script> or use CDN Service (1.3. Version 6):<script src= "//cdn.bootcss.com/jquery-slimscroll/1.3.6/jquery.slimscroll.min.js" ></script >
3. What will be set plus the DIV element Wrap (the P tag is what I want to set)
<div id= "Inner-content" > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, Felis interdum condimentum consectetur, nisl libero elementum eros, Vehicula congue lacus eros non diam. Cum Sociis natoque penatibus et magnis dis parturient montes, Nascetur ridiculus mus. Vivamus mauris lorem, Lacinia ID tempus Non, Imperdiet et Leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac ID nisi. Proin quis lorem velit. Nunc dui DUI, blandit a ullamcorper vitae, Congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar. Pellentesque rhoncus Aliquet Porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In Molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed DUI magna, sodales ID pharetra non, ullamcorper EU sapien. MaURIs AC Consectetur Leo. Mauris consequat, lectus ut bibendum pulvinar, Leo Magna feugiat enim, EU commodo lacus sem vel ante. Sed tempus metus eget Leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per Conubia Nostra, per Inceptos Himenaeos.</p></div>
4. Load the Slimscroll plugin (remember that it must be loaded in the DOM tree to bind the plugin to the element)
<script type= "Text/javascript" > jQuery (document). Ready (function ($) { $ ( "#inner-content"). Slimscroll ({ ' 300px ') ; }); </script>
The above is a simple use of the Slimscroll plugin
Attached (PS: scroll bar on the right to see the content area is supported scrolling)
jquery Library of jquery Slimscroll plugin use