Scrollbar CSS Khusus untuk Firefox

Saya ingin menyesuaikan 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!

Pada akhir 2018, sekarang ada kustomisasi terbatas yang tersedia di Firefox!

Lihat jawaban ini:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

Dan ini untuk info latar belakang: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

Tidak ada Firefox yang setara dengan ::-webkit-scrollbardan teman.

Anda harus tetap menggunakan JavaScript.

Banyak orang ingin fitur ini, lihat: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Sejauh penggantian JavaScript berjalan, Anda dapat mencoba:

• https://github.com/mdbootstrap/perfect-scrollbar
• https://github.com/Grsmto/simplebar
• https://github.com/vitch/jScrollPane

Firefox 64 menambahkan dukungan untuk spec rancangan CSS Scrollbar Modul Level 1 , yang menambahkan dua sifat baru dari scrollbar-widthdan scrollbar-coloryang memberikan beberapa kontrol atas bagaimana scrollbar ditampilkan.

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

• auto Perenderan platform default untuk bagian track pada scrollbar, dengan tidak adanya properti warna scrollbar terkait lainnya.
• dark Tampilkan bilah gulir gelap, yang bisa merupakan 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 bilah gulir, yang kedua ke trek bilah gulir.

Perhatikan bahwa darkdan lightnilai - nilai saat ini tidak diterapkan di Firefox .

catatan macOS:

Scrollbar semi-transparan bersembunyi otomatis yang merupakan standar 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:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

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

• auto Lebar bilah gulir default untuk platform.
• thin Varian lebar scrollbar tipis pada platform yang menyediakan opsi itu, atau scrollbar lebih tipis dari lebar scrollbar platform default.
• none Tidak ada bilah gulir yang ditampilkan, namun elemen tersebut tetap dapat digulir.

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

Mungkin perlu dicatat bahwa opsi nilai panjang dan seluruh scrollbar-widthproperti 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:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Bolehkah saya menawarkan alternatif?

Tidak ada scripting apa pun, hanya gaya css standar dan sedikit kreativitas. Jawaban singkat - menyamarkan bagian-bagian dari 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 mencoba JQuery Custom Scrollbar . Ini cukup mewah dan melakukan beberapa pengguliran yang mulus (dengan menggulir inersia) dan memiliki banyak parameter yang dapat Anda atur, tetapi akhirnya menjadi agak terlalu intensif untuk CPU saya (dan itu menambah jumlah yang wajar untuk DOM).

Sekarang saya mencoba Perfect Scrollbar . 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. Itu hanya punya beberapa parameter untuk di-tweak (wheelSpeed ​​dan wheelPropagation), tapi itu yang saya butuhkan dan menangani pembaruan untuk konten gulir dengan baik (seperti memuat gambar).

PS Saya memang melihat sekilas di JScrollPane, tetapi @simone benar, sekarang sedikit ketinggalan zaman dan PITA.

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

Dalam 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 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 " tipis " dengan aturan berikutscrollbar-width: thin;

Tahun 2020 ini berhasil

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

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

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;
    }
}