Cara Menyesuaikan Scroll Bar Browser Dengan CSS / jQuery

Windows, OS X dan Linux memiliki gaya mereka sendiri untuk scroll bar seperti yang Anda lihat dalam gambar. Hal ini kembali dapat menyebabkan hasil dan konsistensi yang tidak diinginkan untuk desain Anda.
Dalam posting ini kita akan melihat apa yang bisa kita lakukan untuk menyesuaikan tampilan scroll bar sehingga bisa duduk dengan baik dengan desain Anda secara keseluruhan.

 

Internet Explorer 5.5

Kembali di IE 5.5, tim Internet Explorer memperkenalkan seperangkat sifat CSS non-standar yang memungkinkan kita untuk gaya scroll bar, sebagai berikut:

body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}  

Bahkan ada perangkat lunak untuk menghasilkan aturan gaya. Namun, sifat ini tidak sepenuhnya mengendalikan scrollbar, hanya warna. Selain itu, sifat ini telah menurun sejak Internet Explorer 6, sehingga mereka tidak lagi berlaku saat ini.


(Image source: CSS Scrollbar Color Designer)

 

Menggunakan jQuery Plugin

Ada sejumlah plugin jQuery untuk menyesuaikan scroll bar. Salah satu yang benar-benar populer adalah jScrollPane. JScrollPane mengubah scrollbar ke dalam struktur HTML sehingga dapat sepenuhnya disesuaikan melalui CSS, dan juga memiliki dukungan lintas - browser yang lebih baik . Selain itu, dengan API yang disediakan Anda juga dapat mengatur perilaku bar gulir pada mouse peristiwa tertentu.
Satu-satunya downside adalah bahwa hal itu bergantung pada sejumlah perpustakaan JavaScript lainnya: jQuery, Mousewheel. Secara teknis, harus memuat banyak JavaScript dikombinasikan dapat mempengaruhi kinerja website Anda. Tetapi pada saat ini, dengan menggunakan jQuery adalah satu-satunya pilihan terbaik jika Anda prihatin tentang dukungan browser.

Alternative jQuery Plugins

• Control Scrollbar
• Tiny Scrollbar
• Perfect Scrollbar
• Nice Scroller
• Nano Scroller

 

Webkit CSS Properties

Webkit memperkenalkan CSS penyeleksi miliknya scrollbar, sebagai berikut:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer  

Penyeleksi ini memungkinkan Anda untuk menyesuaikan gaya scrollbar pada browser didukung dengan WebKit seperti Google Chrome, Safari, dan Opera. Berikut adalah contoh dasar pelaksanaannya:

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}  

• Lihat Demo
• Download Sumber

Via hongkiat.com
Cara Menyesuaikan Scroll Bar Browser Dengan CSS / jQuery