Apa itu bilah gulir di css?

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;
}

0

html {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

Saya mencoba menambahkan di atas untuk

.section {
  scrollbar-width: thin;
}

_0 tetapi tidak berfungsi seperti yang diharapkan

Sekarang 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;
}

_0

Menambahkan

.section {
  scrollbar-width: thin;
}

_2 untuk track dan jempol diperlukan, karena ini tidak akan berfungsi pada

.section {
  scrollbar-width: thin;
}

3

Dengan 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;
}

_1

Catatan. 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 baru

Contoh 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;
}

_2

Lihat 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;
}

_3

Berdasarkan 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 jari

Lihat 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 Romualdo

Secara default, ketika sebuah elemen memiliki latar belakang dan batas, browser akan memotong

.section {
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}

0

Perhatikan contoh berikut

.section::-webkit-scrollbar-track {
  background-color: darkgrey;
}

_4

Kami 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 belakang

Sekarang, 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;
}

_5

Saya 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;
}

_6

Dan 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;
}

_7

Dengan 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;
}

_8

Masalah 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

Apa gunanya gulir di CSS?

Bagaimana cara mendapatkan bilah gulir di CSS?

Bagaimana Anda mendefinisikan bilah gulir?

Apa itu bilah gulir dalam HTML?