Membuat Scroll Bar Seperti Facebook dengan jQuery

Jika diperhatikan halaman Facebook Anda, terdapat scroll bar lokal yang memudahkan kita dalam melihat konten. Misalkan saja ketika melihat pesan chat dengan teman. Pada tutorial ini kita akan membuat scroll bar seperti di website Facebook dengan jQuery.

Untuk membuat scroll bar seperti Facebook ini, kita akan memanfaatkan plugin SlimScroll. Berikut langkah-langkahnya :

Langkah 1

Importlah jQuery, jQuery UI dan plugin SlimScroll ke dokumen web Anda. Misal :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.slimscroll.js"></script>

Langkah 2

Selanjutnya, buatlah elemen/konten yang nantinya akan ditampilkan scroll bar. Contoh :

<div id="teks" style="padding:5px;text-align:justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
</div>

Langkah 3

Terakhir, tuliskan perintah jQuery untuk menjalankan fungsi scroll bar.

$(document).ready(function() {
   $('#areaScroll').slimscroll({
     width: '600px',
       height: '100px',
      alwaysVisible: true
 });
});

Kesimpulan

Contoh diatas masih dalam bentuk yang sederhana. Anda dapat berkreasi lebih lanjut dengan plugin SlimScroll ini. Silahkan download manual plugin SlimScroll untuk mempelajari beragam efek agar dapat Anda implementasikan sesuai kebutuhan.