Membuat Custom Scrollbar yang Cantik dengan CSS

Share:
Membuat Custom Scrollbar yang Cantik dengan CSS
Halo semua, kembali lagi di sahretech. Kali ini kita akan belajar bagaimana cara membuat custom scroll bar yang cantik dengan menggunakan css. Penasaran?, ayo ikuti selengkapnya di bawah ini.



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.

Membuat Custom Scrollbar yang Cantik dengan CSS
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.
Membuat Custom Scrollbar yang Cantik dengan CSS
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