Scrollbar CSS Khusus untuk Firefox


313

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!


1
Silakan bagikan bagaimana Anda dapat melakukannya menggunakan jQuery. Saya dihadapkan dengan masalah yang sama tetapi menggunakan CSS untuk memperbaikinya untuk Webkit. Namun, Firefox menimbulkan masalah dimana solusi jQuery Anda mungkin dapat membantu.
iGbanam

1
Saya sarankan menggunakan plugin jscrollpane jQuery.
Dimitri Vorontzov

Ada masalah dengan jScrollPane di Firefox. jScrollPane berfungsi dengan sempurna di Chrome tetapi di Firefox Anda memiliki bilah gulir sistem kosong di sebelah kanan bilah gulir jScrollPane. Seharusnya hanya ada satu scrollbar
iGbanam

1
Tidak benar. Jika Anda memilikinya, Anda melakukan sesuatu yang salah di suatu tempat.
Dimitri Vorontzov

Jawaban:


239

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

Lihat jawaban ini:

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:


2
Terima kasih, ThirtyDot. Namun satu pertanyaan: bagaimana dengan -moz-appearance: scrollbartrack-vertical - dan ekstensi CSS terkait lainnya? Mungkin mereka bisa digunakan dalam beberapa cara?
Dimitri Vorontzov

2
Tidak. Sayangnya, tidak ada nilai yang mungkin untuk -moz-appearancedapat membantu. "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."- Anda hanya akan mendapatkan bilah gulir asli.
tigapuluh

15
Kalau-kalau ada orang yang membaca ini membutuhkan solusi praktis, saya akhirnya menggunakan plugin jscrollpane jQuery.
Dimitri Vorontzov

1
@ JacquesMathieu, saya mengerti maksud Anda. Meskipun itu bukan kesalahan Baron, jika saya mengunduh halaman dan mencegah baron dari inisialisasi, bug masih terjadi. Jadi sepertinya Chrome salah di sini.
thephpdev

3
drafts.csswg.org/css-scrollbars-1 adalah permulaan tahap 1 dari spesifikasi, tetapi diaktifkan di Firefox Nightly sekarang di luar kotak secara default.
Wegry

53

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:

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:


Terima kasih atas jawaban ini. Saya telah memperbarui jawaban yang saya terima untuk mempromosikan ini (dan jawaban relevan lainnya) sehingga orang lebih cenderung melihatnya.
tigapuluh

1
Ini pada dasarnya menggandakan jawaban Luca dari tiga minggu sebelumnya.
Josh Habdas

@JoshHabdas Jawaban itu tidak mengandung informasi kompatibilitas atau penggunaan yang hampir sama banyaknya. Saya membuat jawaban ini karena jawaban yang lain tidak memiliki informasi penting yang saya cari.
Alexander O'Mara

1
Anda bisa memberi mereka kredit, menyarankan umpan balik, atau mempertimbangkan mengedit jawaban mereka.
Josh Habdas

2
@JoshHabdas Yah, 5 orang sudah menemukan itu berguna, dan itu berisi informasi yang tidak ditemukan di tempat lain di web, jadi saya tidak setuju.
Alexander O'Mara

43

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/


7
Sayangnya, ini tidak menjawab pertanyaan. Dimitri mencoba menata bilah gulir, bukan menyembunyikannya.
stvnrynlds

14
Itu 4 tahun yang lalu (saya sadar akan hal itu) jadi saya yakin dia sudah melakukan sesuatu sekarang. Tapi topiknya masih relevan sampai sekarang - sementara browser lain memungkinkan beberapa jenis "scrollbar" modifikasi, FF tidak. Itu sebabnya saya memutuskan untuk mempostingnya. Dan hasil front-end adalah styling scrollbar secara visual, terlepas dari kenyataan bahwa cara untuk melakukannya adalah menyembunyikan sebagian darinya.
Tomaz

Saya suka solusi ini kecuali untuk semua markup tambahan dengan posisi absolut (membuat barang-barang ukuran variabel menjadi mimpi buruk) ditambah Anda tidak dapat benar-benar mengubah gaya, Anda hanya menutupi / menyembunyikan elemen scroller yang ada - terlalu buruk jika saya ingin bilah hijau!
RozzA

3
ya, setelah empat tahun, ini bukan tentang menjawab pertanyaan OP sebanyak itu memberikan kontribusi kepada masyarakat.
tmthyjames

3
Inti masalahnya adalah bahwa solusi yang diberikan oleh beberapa mesin render adalah non-standar. Ini adalah pertanyaan yang paling baik menjawab kekhawatiran saya dan ini adalah jawaban yang saya gulirkan.
Filip Dupanović

36

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.


3
Ada juga trackpad scroll emulator - itulah yang digunakan twitch.tv.
forivall

1
Scrollbar Sempurna sebenarnya sangat bagus. Setelah melelahkan banyak pilihan lain, saya menemukan itu menjadi solusi terbaik. Terima kasih telah menyarankannya.
Leonard Teo

nanoScroller juga sangat bagus, dan relatif ramping. jamesflorentino.github.io/nanoScrollerJS Berlawanan dengan plugins JS yang berat, yang satu ini menyembunyikan scroller asli, dan menunjukkan scroller alternatif menggunakan acara 'scroll' asli
Danny R

1
saya telah menghindari semua solusi jquery, karena mereka semua ketinggalan pada mesin yang lebih lambat atau mesin di bawah tekanan, tetapi PS terlihat seperti pemenang
RozzA

31

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;


1
Sepertinya IE 5.5 mungkin mendapatkan sesuatu yang benar. :)
Josh Habdas


0

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.


2
saya mencoba sama seperti yang Anda tulis, tetapi tidak bekerja untuk saya di FF, periksa jsfiddle.net/gGbkY/1 saya kehilangan sesuatu?
Satinder singh

Ini bekerja dengan gaya pengguna, dan sepertinya tidak berfungsi di halaman web. Saya belum menemukan arahan resmi dari Mozilla dalam hal ini.
ipirlo

1
silakan periksa tautan yang sama: tidak berfungsi lagi
Krunal Shah

3
Apa gaya pengguna?
Marecky

Bug yang Anda tautkan dilaporkan 17 tahun yang lalu dan masih belum ditetapkan. Saya pikir aman untuk mengatakan bahwa FF tidak akan pernah mendukung penyembunyian scrollbar asli.
Sterling Bourne

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

5
Anda telah memberikan gumpalan kode dengan sedikit atau tidak ada informasi yang menjelaskan apa yang dilakukannya atau bagaimana melakukannya.
Josh Habdas
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.