If you don’t want to use browser’s default scrollbar or make your div scrollable like Facebook & Google. Then In this post I am going to share cool jQuery plugin slimScroll which help you to transforms any div into a scrollable area with a nice scrollbar similar to the one Facebook and Google started using in their products recently. slimScroll doesn’t occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.
Integrate jQuery Scroll Bar Plugin
Libraries
Include jQuery latest library just after load minified slimScroll library jquery.slimscroll.min.js
<script src="//code.jquery.com/jquery-latest.min.js">script> <script src="jquery.slimscroll.min.js">script> |
HTML
Here is the html div element with some content.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam.
…………
…………
JS
Now make your HTML div container scrollable.
<script> $(function() { $('#demo').slimScroll({ height: '250px' }); }); script> |
Set Scrollbar position
<script> $(function() { $('#demo').slimScroll({ position: 'left', height: '150px', railVisible: true, alwaysVisible: true }); }); script> |
Customize scrollbar color and size
<script> $(function() { $('#demo').slimScroll({ color: '#00f', size: '10px', height: '180px', alwaysVisible: true }); }); script> |
Following are the list of custom functions you can use to customize your scrollbar.
$(selector).slimScroll({ width: '300px', height: '500px', size: '10px', position: 'left', color: '#ffcc00', alwaysVisible: true, distance: '20px', start: $('#child_image_element'), railVisible: true, railColor: '#222', railOpacity: 0.3, wheelStep: 10, allowPageScroll: false, disableFadeOut: false }); |
See live demos and download source code.
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
