Saya ingin menyesuaikan scrollbar dengan CSS.
Saya menggunakan WebKit kode CSS, yang bekerja dengan 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?
Aku tahu aku bisa dengan mudah melakukannya dengan menggunakan jQuery, tapi saya akan lebih memilih untuk melakukannya dengan CSS murni jika itu's bisa dilakukan.
Akan berterima kasih untuk seseorang's saran ahli!
Akhir-akhir 2018, sekarang ada terbatas kustomisasi yang tersedia di Firefox!
Melihat jawaban-jawaban ini:
Dan ini untuk info latar belakang: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Anda'll harus tetap dengan JavaScript.</strike>
Banyak orang akan menyukai fitur ini, lihat: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
Sejauh JavaScript pengganti pergi, anda dapat mencoba:
Mungkin saya menawarkan alternatif?
Tidak ada skrip apapun, hanya standar gaya css dan sedikit kreativitas. Jawaban singkat - masking bagian yang ada scrollbar browser, yang berarti anda mempertahankan semua itu's fungsi.
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
Untuk demo dan sedikit lebih mendalam penjelasan, cek di sini...
[jsfiddle.net/aj7bxtjz/1/][1]
Firefox 64 menambahkan dukungan untuk spec rancangan CSS Scrollbar Modul Level 1, yang menambahkan dua sifat baru dari scrollbar-lebar
dan scrollbar-warna
yang memberikan beberapa kontrol atas bagaimana scrollbar yang ditampilkan.
Anda dapat mengatur scrollbar-warna
salah satu dari nilai berikut (deskripsi dari MDN):
auto
Default platform rendering untuk melacak bagian dari scrollbar, dalam ketiadaan lain yang terkait scrollbar sifat warna.gelap
Show gelap scrollbar, yang dapat berupa gelap varian dari scrollbar yang disediakan oleh platform, atau scrollbar kustom dengan warna gelap.cahaya
Menunjukkan cahaya scrollbar, yang dapat berupa cahaya varian dari scrollbar yang disediakan oleh platform, atau scrollbar kustom dengan warna-warna terang.<warna>
<warna>
Berlaku pertama warna pada scrollbar ibu jari, yang kedua untuk scrollbar track.Perhatikan bahwa gelap
dan terang
nilai saat ini tidak dilaksanakan di Firefox.
macOS catatan:
Auto-menyembunyikan semi-transparan scrollbar yang macOS default tidak dapat diwarnai dengan aturan ini (mereka masih memilih sendiri warna yang kontras berdasarkan latar belakang). Hanya secara permanen menampilkan scrollbar (Preferensi Sistem > Menunjukkan Scroll Bar > Selalu) yang berwarna.
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-lebar
salah satu dari nilai berikut (deskripsi dari MDN):
auto
default scrollbar lebar untuk platform.tipis
tipis scrollbar lebar varian pada platform yang memberikan opsi itu, atau lebih tipis scrollbar dari default platform scrollbar lebar.tidak ada
Tidak ada scrollbar yang ditampilkan, namun elemen masih akan digulir.Anda juga dapat menetapkan panjang tertentu nilai, sesuai spek. Kedua tipis
dan panjang tertentu mungkin tidak melakukan apa-apa pada semua platform, dan apa sebenarnya yang dilakukannya adalah platform-spesifik. Secara khusus, Firefox doesn't tampaknya saat ini mendukung panjang tertentu nilai (komentar ini pada mereka bug tracker tampaknya untuk mengkonfirmasi hal ini). Yang tipis
keywork tidak muncul untuk menjadi baik didukung namun, dengan macOS dan Windows dukungan sekurang-kurangnya.
It's mungkin perlu dicatat bahwa suhu udara turun menjadi pilihan nilai dan seluruh scrollbar-lebar
properti yang sedang dipertimbangkan untuk digunakan di masa depan rancangan, dan jika itu terjadi sifat seperti ini dapat dihapus dari Firefox dalam versi masa depan.
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>
Saya pikir saya akan berbagi temuan dalam kasus seseorang yang sedang mempertimbangkan sebuah plugin JQuery untuk melakukan pekerjaan.
Saya memberikan JQuery Scrollbar Kustom pergi. It's cukup mewah dan tidak beberapa bergulir halus (dengan pengguliran inersia) dan memiliki banyak parameter anda dapat men-tweak, tapi itu berakhir menjadi sedikit terlalu CPU intensif bagi saya (dan itu menambah jumlah yang wajar untuk DOM).
Sekarang saya'm memberikan Sempurna Scrollbar pergi. It's sederhana dan ringan (6KB) dan's melakukan pekerjaan yang layak sejauh ini. It's tidak CPU intensif di semua (sejauh yang saya dapat memberitahu) dan menambahkan sangat sedikit untuk anda DOM. It's hanya punya beberapa parameter untuk men-tweak (wheelSpeed dan wheelPropagation), tapi itu's semua yang saya butuhkan dan itu menangani update untuk bergulir konten yang baik (seperti memuat gambar).
P. S. saya tidak memiliki cepat melihat JScrollPane, tapi @simone adalah benar, itu's sedikit tanggal sekarang dan PITA.
Sejak Firefox 64, adalah mungkin untuk menggunakan new spesifikasi secara sederhana Scrollbar styling (tidak selengkap di Chrome dengan awalan vendor).
Dalam [contoh][3] adalah mungkin untuk melihat solusi yang menggabungkan berbagai aturan untuk mengatasi Firefox dan Chrome yang mirip (tidak sama) hasil akhir (contoh menggunakan Chrome asli aturan):
Aturan utama 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 dicatat bahwa rasa hormat untuk solusi anda, adalah mungkin untuk menggunakan juga sederhana Chrome aturan sebagai berikut:
.scroller::-webkit-scrollbar-track {
background-color: #C2D2E4;
}
.scroller::-webkit-scrollbar-thumb {
height: 30px;
background-color: #0A4C95;
}
Akhirnya, dalam rangka untuk menyembunyikan panah di scrollbar juga di Firefox, saat ini perlu untuk mengaturnya sebagai "tipis" dengan mengikuti aturan scrollbar-width: thin;
Ia bekerja di pengguna-gaya, dan itu tampaknya tidak bekerja pada halaman web. Saya belum menemukan pejabat arah dari Mozilla ini. Sementara itu 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;
}
cek http://codemug.com/html/custom-scrollbars-using-css/ untuk rincian.
@-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;
}
}