Cara menggunakan css scrollbar

Saya ingin mengkustomisasi scrollbar dengan CSS.

Saya menggunakan kode CSS WebKit ini, yang berfungsi baik untuk Safari dan Chrome:

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Bagaimana saya bisa melakukan hal yang sama di Firefox?

Saya tahu saya bisa melakukannya dengan mudah menggunakan jQuery, tapi saya lebih suka melakukannya dengan CSS murni jika itu bisa dilakukan.

Akan berterima kasih atas saran ahli seseorang!

Bolehkah saya menawarkan alternatif?

Tidak ada scripting apa pun, hanya gaya css standar dan sedikit kreativitas. Jawaban singkat - menutupi bagian-bagian di scrollbar browser yang ada, yang berarti Anda mempertahankan semua fungsinya.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

Untuk demo dan penjelasan lebih mendalam, periksa di sini ...

jsfiddle.net/aj7bxtjz/1/

Saya pikir saya akan membagikan temuan saya jika seseorang mempertimbangkan plugin JQuery untuk melakukan pekerjaan itu.

Saya memberi JQuery Scrollbar Kustom a go. Ini cukup mewah dan melakukan beberapa pengguliran yang mulus (dengan menggulir inersia) dan memiliki banyak parameter yang dapat Anda Tweak, tetapi akhirnya menjadi agak terlalu intensif untuk CPU saya (dan itu menambah jumlah yang wajar untuk DOM).

Sekarang saya memberi Perfect Scrollbar a go. Ini sederhana dan ringan (6KB) dan sejauh ini sudah melakukan pekerjaan yang layak. Ini bukan CPU intensif sama sekali (sejauh yang saya tahu) dan menambahkan sangat sedikit ke DOM Anda. Ini hanya punya beberapa parameter untuk Tweak (wheelSpeed ​​dan wheelPropagation), tapi itu yang saya butuhkan dan menangani pembaruan ke konten gulir dengan baik (seperti memuat gambar).

P.S. Saya memang melihat sekilas JScrollPane, tetapi @simone benar, ini sedikit ketinggalan jaman dan PITA.

Firefox 64 menambahkan dukungan untuk draft spesifikasi CSS Scrollbars Module Level 1 , yang menambahkan dua properti bar of scrollbar-width dan scrollbar-color = yang memberi kontrol atas bagaimana scrollbar ditampilkan.

Anda dapat mengatur scrollbar-color ke salah satu nilai berikut (deskripsi dari MDN):

• auto Render platform default untuk bagian lintasan scrollbar, tanpa adanya properti warna scrollbar terkait lainnya.
• dark Tampilkan bilah gulir gelap, yang bisa berupa varian bilah gulir gelap yang disediakan oleh platform, atau bilah gulir khusus dengan warna gelap.
• light Tampilkan bilah gulir cahaya, yang bisa berupa varian bilah gulir ringan yang disediakan oleh platform, atau bilah gulir khusus dengan warna-warna terang.
• <color><color> Menerapkan warna pertama ke ibu jari scrollbar, yang kedua ke track scrollbar.

Perhatikan bahwa nilai dark dan lightsaat ini tidak diterapkan di Firefox .

catatan macOS:

Scrollbar semi-transparan bersembunyi otomatis yang merupakan default macOS tidak dapat diwarnai dengan aturan ini (mereka masih memilih warna kontrasnya sendiri berdasarkan latar belakang). Hanya bilah gulir yang menampilkan secara permanen (Preferensi Sistem> Tampilkan Bilah Gulir> Selalu) yang diwarnai.

Demo Visual:

Anda dapat mengatur scrollbar-width ke salah satu nilai berikut (deskripsi dari MDN):

• auto Lebar scrollbar default untuk platform.
• thin Variasi lebar bilah gulir tipis pada platform yang menyediakan opsi itu, atau bilah gulir lebih tipis dari lebar bilah gulir platform standar.
• none Tidak ada bilah gulir yang ditampilkan, namun elemennya masih dapat digulir.

Anda juga dapat menetapkan nilai panjang tertentu, sesuai dengan spesifikasi. Baik thin dan panjang tertentu mungkin tidak melakukan apa pun pada semua platform, dan apa yang sebenarnya dilakukan adalah platform-spesifik. Secara khusus, Firefox tampaknya saat ini tidak mendukung nilai panjang tertentu ( komentar tentang pelacak bug mereka tampaknya mengkonfirmasi ini ). Namun keywork thin tampaknya didukung dengan baik, dengan setidaknya dukungan MacOS dan Windows.

Mungkin perlu dicatat bahwa opsi nilai panjang dan seluruh properti scrollbar-width sedang dipertimbangkan untuk dihapus dalam konsep yang akan datang, dan jika itu terjadi, properti khusus ini dapat dihapus dari Firefox di versi yang akan datang.

Demo Visual:

Karena Firefox 64 , dimungkinkan untuk menggunakan spesifikasi bar untuk gaya Scrollbar sederhana ( tidak selengkap di Chrome dengan awalan vendor ).

Di contoh ini dimungkinkan untuk melihat solusi yang menggabungkan aturan berbeda untuk mengatasi Firefox dan Chrome dengan hasil akhir yang serupa (tidak sama) (contoh, gunakan aturan Chrome asli Anda):

Aturan utamanya adalah:

Untuk Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Untuk Chrome

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Harap perhatikan bahwa sehubungan dengan solusi Anda, dimungkinkan untuk menggunakan juga aturan Chrome yang lebih sederhana sebagai berikut:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

Akhirnya, untuk menyembunyikan panah di scrollbar juga di Firefox, saat ini diperlukan untuk mengaturnya sebagai " thin " dengan aturan berikut scrollbar-width: thin;

Ini bekerja dengan gaya pengguna, dan sepertinya tidak berfungsi di halaman web. Saya belum menemukan arahan resmi dari Mozilla dalam hal ini. Meskipun mungkin berhasil di beberapa titik, Firefox tidak memiliki dukungan resmi untuk ini. Bug ini masih terbuka https://bugzilla.mozilla.org/show_bug.cgi?id=7779

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

periksa http://codemug.com/html/custom-scrollbars-using-css/ untuk detailnya.

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}