Membuat custom scroll dengan slimscroll

Pernahkah kalian melihat sebuah div atau kotak dalam sebuah website dimana bagian elemennya. Jika pernah, maka kali ini kita akan coba membuatnya menggunakan plugin yang memliki fungsi serupa bernama SlimScroll. Untuk yang belum tahu, SlimScroll ini adalah sebuah plugin kecil yang mengubah setiap div menjadi scrollbar dengan scrollbar bagus - mirip dengan yang ada di Facebook dan Google. slimScroll tidak menempati elemen apapun saat muncul pada mouse over. Pengguna dapat menyeret scrollbar atau menggunakan roda mouse untuk mengubah nilai scroll.

Untuk mendownloadnya kalian bisa kunjungi link github berikut slimScroll

Untuk menggunakannya kita membutuhkan plugin JQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Lalu tambahkan juga javascript SlimScroll dibawahnya

<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>

Contoh struktur penggunaan slimscroll yang benar

<div class="some-content-related-div">
<div id="inner-content-div">
<p>Lorem ipsum dolor sit amet, consectetur .... snip</p>
</div>
</div>

Kalian bisa menggunakan baris kode javascript berikut untuk mengaktifkan slimscroll

$(function(){
    $('#inner-content-div').slimScroll({
        height: '250px'
    });
});

Maka hasilnya akan seperti ini

.

Mengubah posisi scroll menjadi di sebelah kiri dan membuat scrollbar selalu terlihat

$('#slimtest2').slimScroll({
    position: 'left',
    height: '150px',
    railVisible: true,
    alwaysVisible: true
});

Dan kalian juga bisa mengubah warna scroll bar sesuai keinginan kalian dengan baris kode berikut

$('#slimtest3').slimScroll({
    color: '#00f',
    size: '10px',
    height: '180px',
    alwaysVisible: true
});

Sangat banyak sekali fungsi yang bisa kita pelajari, contohnya seperti penggunaan basic seperti ini

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

width - Lebar dalam piksel dari area gulir yang terlihat. Stretch-to-parent jika tidak diatur. Default: tidak ada

height - Tinggi piksel dalam area gulir yang terlihat. Juga mendukung auto untuk mengatur ketinggian agar sama dengan wadah induk. Default: 250px

size - Lebar dalam piksel pada scrollbar. Default: 7px

position - left atau right Mengatur posisi scrollbar. Default: right

color - Warna di hex dari scrollbar. Default: #000000

alwaysVisible - Menonaktifkan scrollbar hide. Default: false

distance - Jarak dalam pixel dari tepi elemen induk tempat scrollbar akan muncul. Ini digunakan bersamaan dengan position. Default: 1px

Masih banyak lagi yang bisa kalian lihat pada halaman dokumentasinya di halaman berikut Dokumentasi SlimScroll

Demikian artikel tentang cara membuat custom scrollbar dengan SlimScroll. Semoga bermanfaat.