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.

 

23 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat