Bar tatal - Trik CSS | CSS Almanac 2025

Sejarah ringkas gaya bar tatal:

Dulu perkara yang hanya dilakukan Internet Explorer (versi kuno) dengan perkara seperti -ms-scrollbar-base-color. Ini tidak wujud lagi.
Kemudian mesin penyemak imbas berasaskan WebKit disertakan dengan barang seperti ::-webkit-scrollbar. Itulah yang sering diliputi oleh entri Alamanac ini, kerana ia berfungsi di lanskap Safari / Chrome hari ini.
Piawaian akhirnya terlibat, dan pilihan gaya ini dilindungi oleh sifat yang tidak diawali seperti warna bar tatal dan lebar bar tatal.

Styling bar bar untuk dunia Safari / Chrome terpapar di belakang -webkitawalan vendor.

Entri almanak ini adalah gambaran keseluruhan, untuk perincian kerja yang lebih lengkap dengan bar tatal tersuai, sila baca artikel CSS-Tricks ini.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

The -webkit-scrollbarkeluarga hartanah terdiri daripada tujuh berbeza pseudo-elemen yang, bersama-sama, terdiri daripada elemen scrollbar UI penuh:

::-webkit-scrollbarmenangani latar bar itu sendiri. Ia biasanya diliputi oleh unsur-unsur lain
::-webkit-scrollbar-button alamat butang arah pada bar tatal
::-webkit-scrollbar-track alamat ruang kosong "di bawah" bar kemajuan
::-webkit-scrollbar-track-piece adalah lapisan paling atas bar kemajuan yang tidak diliputi oleh elemen tatal yang boleh ditarik (ibu jari)
::-webkit-scrollbar-thumb menangani elemen tatal yang boleh diseret yang saiznya bergantung pada ukuran elemen yang boleh ditatal
::-webkit-scrollbar-corner mengatasi sudut bawah (biasanya) elemen yang boleh ditatal, di mana dua bar tatal mungkin bertemu
::-webkit-resizermenangani pemegang ukuran yang boleh diseret yang muncul di atas scrollbar-cornerdi sudut bawah beberapa elemen

Sebagai tambahan kepada unsur-unsur semu ini, terdapat juga sebelas kelas pemilih semu yang tidak diperlukan tetapi memberikan perancang kekuatan untuk menggayakan pelbagai keadaan dan interaksi UI bar tatal. Penjelasan lengkap mengenai pemilih semu tersebut, dan contoh terperinci, terdapat dalam artikel CSS-Tricks ini.

Lihat Pen ini!

Tempat Menarik

Sekiranya tidak ada pemilih yang memenuhi syarat sebelum berbagai elemen semu, gaya akan berlaku untuk bar tatal yang mungkin muncul di halaman.
Menetapkan -webkit-scrollbargaya adalah cara yang baik untuk memaksa halaman web anda untuk menunjukkan bar tatal mendatar atau menegak pada versi Mac OS yang lebih baru daripada Lion, di mana bar tatal biasanya disembunyikan secara lalai.
Oleh kerana harta ini berada di belakang -webkitawalan vendor, beberapa plugin jQuery telah ditulis ke "polyfill" atau memperluas fungsi ini ke penyemak imbas lain. Salah satu pemalam tersebut ialah jScrollPane.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.