Bilah gulir khusus semakin populer saat ini, dan saya sangat tertarik untuk mempelajarinya. Ada berbagai alasan mengapa menyesuaikan scrollbar. Misalnya, scrollbar default dapat membuat UI aplikasi terlihat tidak konsisten di beberapa sistem operasi, dan di sini kita bisa mendapatkan keuntungan dari memiliki gaya terpadu
Saya selalu tertarik untuk mempelajari cara menyesuaikan bilah gulir di CSS, tetapi tidak mendapatkan kesempatan untuk melakukannya. Pada artikel ini, saya akan mengambil kesempatan dan belajar tentang mereka dan mendokumentasikan perjalanan ini
Perkenalan
Hal pertama yang ingin saya jelaskan adalah komponen atau bagian dari scrollbar. Bilah gulir berisi trek dan ibu jari. Berikut adalah visual yang menunjukkan mereka
Trek adalah dasar bilah gulir, di mana ibu jari adalah apa yang diseret pengguna untuk menggulir di dalam halaman atau bagian
Ada satu hal penting yang perlu diingat bahwa scrollbar dapat bekerja secara horizontal atau vertikal, tergantung pada desainnya. Juga, itu dapat berubah saat bekerja di situs web multibahasa yang bekerja di kedua arah kiri-ke-kanan [LTR] dan kanan-ke-kiri [RTL]
Menyesuaikan desain scrollbar
Memiliki bilah gulir khusus dulu hanya untuk webkit sehingga Firefox dan IE keluar dari permainan. Kami memiliki sintaks baru yang hanya berfungsi di Firefox dan akan mempermudah kami jika didukung sepenuhnya. Saya akan membahas sintaks Webkit lama, lalu yang baru
Sintaks lama
Lebar bilah gulir
Pertama, kita perlu menentukan ukuran scrollbar. Ini bisa berupa lebar untuk scrollbar vertikal, dan tinggi untuk scrollbar horizontal
.section::-webkit-scrollbar {
width: 10px;
}
Dengan set itu, kita bisa menata scrollbar itu sendiri
Trek bilah gulir
Ini merupakan dasar dari scrollbar. Kita bisa menatanya dengan menambahkan warna latar belakang, bayangan, border-radius, dan border
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_Jempol bilah gulir
Setelah kita menyiapkan dasar scrollbar, kita perlu memberi style pada scrollbar thumb. Itu penting karena pengguna dapat menyeret ibu jari ini untuk berinteraksi dengan bilah gulir
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
Dengan itu, kami telah membahas cara lama menata bilah gulir khusus di CSS. Mari jelajahi sintaks baru
Sintaks baru
Lebar bilah gulir
Seperti yang dikatakan, ini menentukan lebar bilah gulir dan nilai yang paling kami pedulikan adalah
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
9 dan .section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
0. Sayangnya, kami tidak dapat menentukan nomor tertentu seperti di sintaks webkit.section {
scrollbar-width: thin;
}
Warna bilah gulir
Dengan properti ini, kita dapat menentukan warna untuk track scrollbar dan jempol sebagai nilai pasangan
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
_Sesederhana sintaks baru ini, tetapi terbatas. Kami hanya dapat menerapkan warna solid. Kami tidak dapat menambahkan bayangan, gradien, tepi bulat, atau semacamnya. Yang boleh kami sesuaikan hanyalah warna
Talang scrollbar
Pernahkah Anda bertanya-tanya tentang bagaimana kami dapat menghindari perubahan tata letak saat konten tumbuh dalam wadah bergulir?
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
}
Kami memiliki wadah dengan bantalan
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
_1 di semua sisi. Hingga saat ini, kontennya pendek dan bilah gulir tidak ditampilkan karena .section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
2 digunakan [Pengingat ramah. ketika .section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_9 digunakan untuk .section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
4, itu tidak akan menampilkan bilah gulir sampai kontennya panjang]Saat konten bertambah, bilah gulir akan ditampilkan dan dengan demikian ruang yang tersedia untuk konten akan berkurang
Perhatikan bagaimana konten bergeser saat ada scrollbar. Itu karena browser harus menyediakan ruang untuk scrollbar
Untungnya, ini dapat diselesaikan sekarang dengan
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
_5 [didukung di browser berbasis Chromium, v94+]. Ini bekerja dengan cara yang memungkinkan kami memesan ruang terlebih dahulu. Nilai defaultnya adalah .section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_9, dan nilai lainnya adalah .section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
7. Perlu juga disebutkan bahwa ada nilai opsional .section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
8 yang menunjukkan selokan di kedua sisi.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
scrollbar-gutter: stable;
}
Dengan begitu, saat konten bertambah, tidak akan bergeser karena browser sudah menyediakan ruang untuk itu. Berikut adalah visual yang menunjukkan dua kasus [Konten pendek vs konten panjang]
Agar lebih jelas, saya mengerjakan demo interaktif yang menunjukkan bagaimana selokan ditambahkan ke wadah
Lihat Pen Scrollbar Gutter - Demo oleh Ahmad Shadeed [@shadeed] di CodePen
Menentukan ruang lingkup bilah gulir khusus
Hal penting yang perlu diketahui adalah di mana menyesuaikan bilah gulir. Apakah Anda ingin gayanya generik dan berfungsi untuk semua scrollbar di situs web?
Dengan sintaks lama, kita dapat menulis pemilih tanpa melampirkannya ke suatu elemen, dan mereka akan diterapkan ke semua elemen yang dapat digulir
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
Namun, jika Anda ingin menerapkan bagian tertentu saja, Anda perlu menambahkan elemen sebelum pemilih
.section::-webkit-scrollbar {
width: 10px;
}
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
Untuk sintaks yang baru hampir sama. Hal yang saya perhatikan adalah jika Anda menginginkan gaya generik, itu harus diterapkan pada elemen
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba[0, 0, 0, 0.3];
}
9, bukan .section {
scrollbar-width: thin;
}
0html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
Saya mencoba menambahkan di atas untuk
.section {
scrollbar-width: thin;
}
_0 tetapi tidak berfungsi seperti yang diharapkanSekarang setelah kita mengetahui cara kerja sintaks lama dan baru, mari kita menyesuaikan beberapa desain scrollbar
Menyesuaikan desain scrollbar
Contoh 1
Sebelum mulai menyesuaikan bilah gulir, ada baiknya berbicara tentang gaya default di Mac OS. Begini tampilannya
- Trek scrollbar memiliki batas di sisi kiri dan kanan, dengan warna latar belakang yang solid
- Jempol scrollbar dibulatkan dan dengan ruang di sekitarnya dari sisi kiri dan kanan
Untuk windows, ini sedikit berbeda
Inilah cara kami menyesuaikan bilah gulir berdasarkan mockup di atas
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_0Menambahkan
.section {
scrollbar-width: thin;
}
_2 untuk track dan jempol diperlukan, karena ini tidak akan berfungsi pada .section {
scrollbar-width: thin;
}
3Dengan sintaks baru, kami tidak dapat menyesuaikan
.section {
scrollbar-width: thin;
}
4 dari bilah gulir, dan yang hanya mungkin adalah mengubah warna latar trek dan ibu jari.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_1Catatan. contoh berikutnya hanya bekerja dengan sintaks
.section {
scrollbar-width: thin;
}
5. Untuk proyek kehidupan nyata, Anda dapat menambahkan .section {
scrollbar-width: thin;
}
5 dan sintaks baruContoh 2
Untuk contoh ini, desainnya sedikit lebih berat karena mengandung gradien dan bayangan. Apakah itu bisa dilakukan? . Mari kita lihat caranya
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_2Lihat Pen Custom Scrollbar - 2 oleh Ahmad Shadeed [@shadeed] di CodePen
Contoh 3
Kami juga dapat menambahkan batas ke ibu jari dan trek, yang dapat membantu kami dengan beberapa desain yang rumit
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_3Berdasarkan contoh yang sama, kita dapat mengatur ulang batas atas dan bawah ke
.section {
scrollbar-width: thin;
}
7 dan mendapatkan efek yang menarik untuk ibu jari. Perhatikan elemen-elemen kecil di bagian atas dan bawah ibu jariLihat Pen Custom Scrollbar - 3 oleh Ahmad Shadeed [@shadeed] di CodePen
Contoh 4
Dalam contoh ini, kami ingin ibu jari scrollbar memiliki offset dari semua sisi. Karena tidak mungkin untuk menggunakan
.section {
scrollbar-width: thin;
}
_8 dengan properti scrollbar, kami memerlukan peretasan untuk menggunakan batas CSS dan .section {
scrollbar-width: thin;
}
9. Saya belajar tentang ide ini dari artikel hebat ini oleh Gabriel RomualdoSecara default, ketika sebuah elemen memiliki latar belakang dan batas, browser akan memotong
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
0Perhatikan contoh berikut
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_4Kami memiliki tombol dengan batas hitam
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
_1. Itu tidak memiliki bantalan untuk menjelaskan konsepnya. Misalkan .section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
_2 diatur ke .section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
0, batas akan disertakan dalam ukuran tombol. Akibatnya, perbatasan muncul di atas latar belakangSekarang, saat kami menerapkan
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
4, latar belakang hanya akan muncul di sekitar konten.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_5Saya harap idenya jelas. Mari kita kembali ke jempol scrollbar. Untuk meniru efeknya, kita perlu menambahkan yang berikut ini
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_6Dan kita sudah selesai
Lihat Pen Custom Scrollbar - 4 oleh Ahmad Shadeed [@shadeed] di CodePen
Dengan itu, kami telah menjelajahi cara menyesuaikan desain bilah gulir yang berbeda. Untuk Firefox, kita dapat menggunakan sintaks baru tetapi sekali lagi, itu hanya terbatas pada ketebalan dan warna solid
Bisakah kita menambahkan efek hover?
Ya, kita bisa menambahkan efek hover ke jempol scrollbar untuk sintaks lama dan baru
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_7Dengan sintaks baru, kita bisa menambahkan transisi, sedangkan dengan yang lama, kita tidak bisa. Ini bukan masalah besar bagi saya
Tampilkan bilah gulir saat dibutuhkan
Membuat elemen yang dapat digulir dimungkinkan dengan menambahkan nilai selain
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
5 ke properti .section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
6. Disarankan untuk menggunakan kata kunci .section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_9 karena hanya akan menampilkan scrollbar jika konten melebihi wadahnya.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
_8Masalah aksesibilitas
Saat menyesuaikan desain scrollbar, harap diingat untuk memiliki kontras yang baik antara ibu jari dan trek, sehingga mudah diperhatikan oleh pengguna
Pertimbangkan contoh "buruk" berikut untuk bilah gulir khusus
Warna ibu jari hampir tidak terlihat. Ini tidak baik untuk pengguna karena akan mempersulit jika digunakan untuk menggulir melalui ibu jari