Facebook & Google Like Custom jQuery Scroll Bar Plugin – slimScroll

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>

<div id="demo" style="overflow: hidden; width: auto; height: 200px;">
<img src="https://placeimg.com/200/150/animal" style="float:left; width:200px; margin:10px 10px 10px 0">		
<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. </p>
<p>............</p>
<p>............</p>
</div>

<script>
$(function() {   
  $('#demo').slimScroll({
        height: '250px'
  });
});
</script>

<script>
$(function() {   
 $('#demo').slimScroll({
    position: 'left',
    height: '150px',
    railVisible: true,
    alwaysVisible: true
 });
});
</script>

<script>
$(function() {   
 $('#demo').slimScroll({
    color: '#00f',
    size: '10px',
    height: '180px',
    alwaysVisible: true
 });
});
</script>

$(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
});