Bar tatal adalah salah satu komponen UI yang terdapat di hampir setiap halaman internet, namun kami (pemaju) tidak mempunyai kawalan sedikitpun terhadapnya. Beberapa penyemak imbas memberi kita kemampuan untuk menyesuaikan penampilan mereka tetapi bagi kebanyakan penyemak imbas termasuk Firefox, itu tidak mungkin dilakukan.
Terdapat beberapa kemas kini dan standardisasi untuk menggayakan bar tatal. Lihat Status Gulungan Gaya semasa untuk terakhir, yang boleh anda bawa ke mixin
Namun, Chrome dan Internet Explorer (ya) memungkinkan kita menentukan gaya tersuai untuk bar tatal. Walau bagaimanapun, sintaksnya sangat rumit, dan tentu saja, pasti tidak standard. Selamat datang ke dunia hak milik. Inilah sebabnya mengapa anda mungkin memerlukan sedikit mixin untuk menyesuaikan bar tatal anda dengan mudah. Betul?
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )Penggunaan:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Contohnya
Lihat mixin Pen Sass untuk penggayaan bar tatal oleh Hugo Giraudel (@HugoGiraudel) di CodePen.
Melangkah lebih jauh
Pada kedua-dua penyemak imbas, terdapat lebih banyak pilihan daripada sekadar warna dan saiz. Walau bagaimanapun, mereka sering terlepas pandang, jadi saya rasa tidak semestinya terlalu ramai dengan pilihan ini. Jangan ragu untuk membina mixin yang lebih maju dengan pilihan tambahan.
Bacaan selanjutnya:
- Bar Skrol WebKit yang Disisipkan & Disesuaikan
- Bar tatal tersuai dalam Webkit
- Bar tatal tersuai untuk IE dan Chrome menggunakan CSS