Cara Mudah Memberi efek scroll bar Dengan CSS


Cara Mudah Memberi Efek Scroll Bar Dengan CSS
Hello Dunia! 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.



Dan Kita web tanpa css ibaratkan tanpa design jadi css itu berguna sekali yahh..



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 :


Terima kasih atas kunjungan nya mohon maaf jika ada yang salah Mohon Komen Di bawah ini 

0 Response to "Cara Mudah Memberi efek scroll bar Dengan CSS"

Post a Comment