The scrollbar-gutterproperti menyediakan fleksibilitas untuk menentukan bagaimana ruang browser menggunakan untuk menampilkan scrollbar yang berinteraksi dengan konten pada layar. Spesifikasi mendeskripsikannya sebagai "menyisihkan ruang untuk scrollbar" dan itu masuk akal karena itulah yang pada akhirnya adalah selokan: wadah yang menyediakan ruang untuk apa pun yang ada di dalamnya dan memisahkannya dari elemen lain.
Jadi kita semua berada di halaman yang sama, scrollbar adalah hal yang biasanya ada di sisi kanan browser (secara resmi disebut sebagai "agen pengguna" - atau UA - dalam spesifikasi) yang menunjukkan posisi scroll Anda relatif terhadap total ruang yang tersedia di halaman web.
Itu secara tradisional menjadi wadah visual dengan indikator geser. Ini disebut sebagai scrollbar klasik . Indikator berada di dalam selokan dan selokan menempati area fisik di layar saat ditampilkan.
Namun, belakangan ini, tampilan scrollbar cenderung mengarah ke sesuatu yang jauh lebih minim. Kami menyebut bilah gulir hamparan tersebut dan sebagian atau seluruhnya transparan saat berada di atas konten halaman. Dengan kata lain, tidak seperti scrollbar klasik yang menempati real estate fisik di layar, scrollbar overlay berada di atas konten layar.
Saat kami melakukannya, scrollbar dapat muncul di tempat lain. Selain duduk di sebelah kanan browser, kita akan melihat scrollbar pada elemen HTML di mana konten meluap dari elemen dan overflowproperti (atau overflow-xdan overflow-y) disetel ke scrollnilai. Dan perhatikan bahwa keberadaan overflow-xsarana kita memiliki scrolling horizontal selain scrolling vertikal.
Itulah yang kita bicarakan. Bukan indikator itu sendiri, tapi wadah yang menampungnya. Itu selokannya. Apakah browser menggunakan scrollbar klasik atau overlay, sepenuhnya terserah UA itu sendiri. Itu bukan hak kami untuk memutuskan. Ini berlaku untuk lebar scrollbar. Agen pengguna mendefinisikannya dan tidak memberi kami kendali atasnya.
Di situlah scrollbar-guttermasuk. Kita bisa menguraikan apakah talang hadir dalam variasi klasik dan hamparan.
Sintaksis
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Tanda ampersand ganda (&&) memisahkan dua atau lebih komponen, yang semuanya harus muncul, dalam urutan apa pun.
Tanda tanya (?) Menunjukkan bahwa jenis, kata, atau grup sebelumnya adalah opsional (muncul nol atau satu kali).
Nilai
auto(nilai awal): Hampir seperti perilaku default yang dijelaskan sejauh ini. Menyetel properti ke nilai ini memungkinkan scrollbar klasik menggunakan real estate di UI pada elemen tempatoverflowproperti elemen tersebut disetel kescrollatauauto. Sebaliknya, bilah gulir hamparan tidak memakan ruang sama sekali dengan duduk di atas elemen.stable: Ini menambahkan sedikit perilaku beropini dengan selalu menyediakan ruang untuk talang bilah gulir, selamaoverflowproperti pada elemen yang sama disetel kescrollatauautodan kita berurusan dengan bilah gulir klasik - bahkan saat kotak tidak meluap. Sebaliknya, ini tidak akan berdampak pada bilah gulir hamparan.always: Ini berfungsi sama sepertistabletetapi memastikan bahwa ruang untuk talang bilah gulir selalu dicadangkan, terlepas dari apakah bilah gulir itu klasik atau hamparan dan terlepas dari apakah kontennya meluap atau tidak.both: Ini menyatakan bahwa talang scrollbar akan ditempatkan di kedua sisi elemen saat talang default ditampilkan. Anda dapat melihat bagaimana ini bisa berguna jika desain Anda membutuhkan jarak yang sama di kedua sisi elemen.force: Ini adalah sama dengan menerapkan keduastabledanalwaysdi mana elemenoverflowdiatur untukauto,scroll,visible,hiddenatauclip.
Draf Kerja spesifikasi memiliki tabel yang sangat berguna yang memecah definisi tersebut ke dalam konteksnya untuk menunjukkan hubungan yang mereka miliki dengan bilah gulir klasik dan overlay.
| Scrollbar klasik | Hamparkan bilah gulir | ||||
|---|---|---|---|---|---|
| meluap | scrollbar-selokan | Meluap | Tidak meluap | Meluap | Tidak meluap |
| gulir | mobil | G | G | ||
| stabil | GM | G | |||
| selalu | G | G | G | G | |
| mobil | G | ||||
| stabil | G | G | |||
| selalu | G | G | G | G | |
| terlihat, tersembunyi, klip | mobil | ||||
| stabil | f? | f? | |||
| selalu | f? | f? | f? | f? | |
"G" mewakili kasus di mana ruang disediakan untuk talang scrollbar, "f?" kasus di mana ruang dicadangkan untuk talang bilah gulir jika gaya ditentukan, dan kasus sel kosong di mana tidak ada ruang yang dicadangkan.
Status Spesifikasi
The scrollbar-gutterproperti didefinisikan dalam Overflow Modul Level 4, yang dalam status Draft Kerja. Artinya, ini masih dalam proses dan dapat berubah antara sekarang dan waktu rancangan dipindahkan ke Rekomendasi Kandidat.
spesifikasi Overflow Module Level 3 juga merupakan Working Draft, jadi itu merupakan indikasi yang baik bahwa (1) akan memakan waktu lama untuk scrollbar-guttermenjadi rekomendasi dan (2) masih sangat banyak dalam pengerjaan.
Dukungan Browser
Tidak ada dukungan browser pada saat pembaruan terakhir.
Informasi Lebih Lanjut
- Draf Kerja CSS Overflow Module Level 4
- Masalah GitHub # 92
- Kelompok Kerja CSS Di TPAC: Apa Yang Baru Di CSS? Termasuk proposal yang digambar tangan untuk tabel yang menguraikan perilaku nilai properti.