Scrollbar adalah batang gulir yang biasanya terletak di sebelah kanan website. Bilah gulir ini juga biasanya berada pada bagian-bagian tertentu di dalam website yang memiliki panjang over-flow. Mendesain ulang scrollbar akan membuat website kalian lebih menonjol. Kali ini kita akan mendesain ualng scrollbar pada sebuah website dengan gaya yang minimilalis tapi tetap cantik.
|
| Default Scrollbar in Mac and Windows |
1. Buatlah sebuah folder custom_scrollbar, lalu buat file index.html. Copy script html plain di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>.....</style>
</head>
<body>
<div>
<h1>Try Scrolling!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa
sapiente expedita aperiam iste suscipit cum voluptates voluptatibus
facilis incidunt perferendis dolore iure iusto, minima culpa id velit
consequatur quae?
</p>
<!-- tambahkan lebih banyak tulisan untuk membuat scrollbar tampil -->
</div>
</body>
</html>
2. Copy script css di bawah ini dan paste di dalam <style> ….. </style>. Untuk penjelasannya bisa kalian lihat pada scrip di bawah ini.
/* membuat container atau wadah dari scrollbar dengan lebar 20px */
::-webkit-scrollbar {
width: 20px;
}
/* membuat background dari scrollbar */
/* kasih warna transparan agar lebih estetik */
::-webkit-scrollbar-track {
background-color: transparent;
}
/* membuat styling pada batang atau bar scrollbar */
/* kita beri warna abu tua dengan lengkungan di sisi atas dan bawahnya */
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
/* warna akan berubah menjadi abu mudah saat kursor diarahkan */
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}3. Silahkan jalankan file di atas. Hasil akhirnya akan tampak seperti gambar di bawah ini. Styling ini otomatis membuat semua scrollbar yang ada menjadi scrollbar yang telah dicustom. Tapi jika kalian ingin memberikan styling pada bagian tertentu, silahkan tambahkan class di depan setiap ::-webkit sesuai dengan class yang ingin di-styling.
|
| Tampilan Akhir |
Bagaimana guys, mudah atau susah?. Sekian tutorial styling dan customisasi
scrollbar kali ini. Semoga beramanfaat. Dan jangan lupa ikuti tutorial dan
artikel menarik lainnya hanya di sahretech.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi