Cara Beri Efek CSS pada Scroll Bar

Share:
Hello World's! Ketika mendesain tampilan web haruslah secara total. Semuanya musti diperhatikan, mulai dari bagian atas (header)-nya, container-nya, menu-nya. Dan kalau perlu, bagian scroll juga harus diubah tampilannya agar bisa sinkron dengan laman-nya dan terlihat lebih ciamik.

Tapi, ketika kita mencoba niatan mengubah tampilan scroll bar, pasti bingung, selectornya apaan ya? Dikasih class atau ID nggak mungkin, kalau langsung "selector" nggak bisa. Gimana ya caranya? Apa musti pake framework khusus biar work? Nggak juga kok. CSS native bisa.

Untuk memberi efek pada scroll bar ternyata perlu sintaks khusus yang tidak sama seperti elemen-elemen yang lain, yang ditulis begitu saja pada css-nya. Sintaks-nya pun sedikit lebih rumit. Jika yang lain cuma "#namaSelector { efek: value; }", mengubah scroll bar itu sintaks nya seperti ini.

<style>
     ::-webkit-scrollbar {
          /* selector scroll bar */
     }
     ::-webkit-scrollbar-track {
          /* lajur scroll bar */
     }
     ::-webkit-scrollbar-thumb {
          /* thumb scrollbar-nya */
     }
     ::-webkit-scrollbar-thumb:hover {
          /* thumb scrollbar ketika di-hover */
     }
</style>

Oke, sebagai contoh, kita akan buat sebuah laman sederhana untuk mencoba memberi CSS pada scrollbar. Buat sebuah file HTML dan ketikkan kode berikut ini;

<!DOCTYPE html>
<html>
<head>
     <title>Contoh Laman dengan Efek Scrollbar</title>
     <style>
          ::-webkit-scrollbar {
               width: 10px;
          }
          ::-webkit-scrollbar-track {
               background: #333;
          }
          ::-webkit-scrollbar-thumb {
               background: #2ecc71;
               border-radius: 5px;
          }
          ::-webkit-scrollbar-thumb:hover {
               background: #27ae60;
          }
     </style>
</head>
<body>

<h1>Ini Judul</h1>
<script>
     for ( i = 1; i <= 900; i++ ) {
          document.write("ini konten laman ");
     }
</script>

</body>
</html>

Kemudian simpan dan buka file tersebut. Penampakannya akan seperti ini


Dari penampakan bisa kita lihat thumb / objek yang kita tarik pas scrolling berwarna hijau (#2ecc71), itu nanti kalu di-hover akan berubah menjadi lebih gelap (#27ae60). Sedangkan, pada track thumb (bawahnya thumb), berwarna hitam (#333). Anda bisa mengkreasikan sendiri sebagus mungkin dan jika bisa warnanya sinkron dengan tema tampilan laman web-nya. Salam Koding!

Tidak ada komentar