Mixin Scrollbar Kustom - Trik CSS

Scrollbar adalah salah satu komponen UI yang ada di hampir setiap halaman internet, namun kami (pengembang) memiliki sedikit atau tidak ada kendali atasnya. Beberapa browser memberi kami kemampuan untuk menyesuaikan tampilannya, tetapi untuk sebagian besar browser termasuk Firefox, hal itu tidak memungkinkan.

Telah ada beberapa pembaruan dan standarisasi untuk menata scrollbar. Lihat Status Scrollbar Saat Ini untuk yang terbaru, yang dapat Anda porting ke mixin.

Namun, Chrome dan Internet Explorer (ya) memungkinkan kami untuk menentukan gaya khusus untuk bilah gulir. Namun sintaksnya sangat rumit, dan tentu saja, jelas tidak standar. Selamat datang di dunia kepemilikan. Inilah mengapa Anda mungkin ingin memiliki sedikit mixin untuk menyesuaikan scrollbar Anda dengan mudah. Baik?

@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; ) )

Pemakaian:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Contoh

Lihat mixin Pen Sass untuk penataan scrollbar oleh Hugo Giraudel (@HugoGiraudel) di CodePen.

Lebih jauh

Di kedua browser, ada lebih banyak pilihan selain warna dan ukuran. Namun, mereka sering diabaikan jadi saya rasa tidak ada gunanya memenuhi mixin dengan opsi ini. Jangan ragu untuk membuat mixin yang lebih canggih dengan opsi tambahan.

Bacaan lebih lanjut: