Properti scrollbar-gutterini memberikan fleksibiliti untuk menentukan bagaimana ruang yang digunakan penyemak imbas untuk memaparkan bar tatal yang berinteraksi dengan kandungan di skrin. Spesifikasi menerangkannya "menempah ruang untuk bar tatal" dan itu masuk akal kerana itulah selokan yang akhirnya: bekas yang menyimpan ruang untuk apa sahaja yang ada di dalamnya dan memisahkannya dari unsur-unsur lain.
Oleh itu, kita semua berada di halaman yang sama, bar tatal adalah perkara yang biasanya terdapat di sebelah kanan penyemak imbas (secara rasmi disebut sebagai "ejen pengguna" - atau UA - dalam spesifikasi) yang menunjukkan kedudukan tatal anda berbanding dengan jumlah keseluruhan ruang yang tersedia di laman web.
Mereka secara tradisional menjadi wadah visual dengan penunjuk gelongsor. Ini disebut sebagai bar tatal klasik . Penunjuk duduk di dalam selokan dan selokan mengambil harta tanah fizikal di skrin semasa dipaparkan.
Akhir-akhir ini, penampilan bar tatal cenderung ke arah sesuatu yang lebih minimum. Kami memanggil bar tatal hamparan itu dan itu sama ada sebahagian atau sepenuhnya telus semasa duduk di bahagian atas kandungan halaman. Dengan kata lain, tidak seperti bar tatal klasik yang menggunakan harta tanah fizikal di skrin, bar tatal hamparan duduk di atas kandungan skrin.
Semasa kita berada, bar tatal boleh muncul di tempat lain. Selain duduk siram sebelah kanan pelayar, kita akan melihat scrollbar pada unsur-unsur HTML mana kandungan melimpah elemen dan overflowharta ( overflow-xdan overflow-y) ditetapkan kepada scrollnilai. Dan perhatikan bahawa adanya overflow-xcara kita mempunyai tatal melintang selain tatal menegak.
Itulah yang kita bincangkan. Bukan penunjuk itu sendiri, tetapi bekas yang menahannya. Itulah selokan. Sama ada penyemak imbas menggunakan bar tatal klasik atau hamparan bergantung sepenuhnya kepada UA itu sendiri. Itu bukan untuk kita membuat keputusan. Hal ini berlaku untuk lebar bar tatal. Ejen pengguna menentukannya dan tidak memberi kita kawalan ke atasnya.
Di sinilah scrollbar-gutterkita dapat masuk. Kita dapat menerangkan sama ada selokan terdapat dalam variasi klasik dan lapisan.
Sintaks
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Satu ampersand berganda (&&) memisahkan dua atau lebih komponen, semuanya mesti berlaku, mengikut urutan apa pun.
Tanda tanya (?) Menunjukkan bahawa jenis, kata, atau kumpulan sebelumnya adalah pilihan (berlaku sifar atau satu kali).
Nilai
auto(nilai awal): Sebilangan besar tingkah laku lalai yang dijelaskan setakat ini. Menetapkan harta tanah ke nilai ini membolehkan bar tatal klasik menggunakan harta tanah di UI pada elemen di manaoverflowsifat elemen tersebut ditetapkan kescrollatauauto. Sebaliknya, bar tatal hamparan tidak mengambil ruang sama sekali dengan duduk di atas elemen.stable: Ini menambahkan tingkah laku yang sedikit berpandangan dengan selalu memberi ruang untuk selokan bar tatal selagioverflowsifat pada elemen yang sama ditetapkan kescrollatauautodan kita berhadapan dengan bar tatal klasik - walaupun kotak itu tidak meluap. Sebaliknya, ini tidak akan memberi kesan pada bar tatal hamparan.always: Ini bertindak sama sepertistabletetapi memastikan bahawa ruang untuk talangan bar tatal sentiasa disediakan, tidak kira sama ada bar tatal itu klasik atau overlay dan tidak kira sama ada kandungannya meluap atau tidakboth: Ini menyatakan bahawa talang bar tatal akan diletakkan di kedua-dua sisi elemen semasa talang lalai ditunjukkan. Anda dapat melihat bagaimana ini mungkin berguna sekiranya reka bentuk anda memerlukan jarak yang sama di kedua-dua sisi elemen.force: Ini adalah sama seperti menggunakan kedua-duastabledanalwaysdi mana ini elemenoverflowditetapkan kepadaauto,scroll,visible,hiddenatauclip.
Draf Kerja spesifikasi mempunyai jadual yang sangat berguna yang memecah definisi tersebut ke dalam konteksnya untuk menunjukkan hubungan mereka dengan bar tatal klasik dan overlay.
| Bar tatal klasik | Overlay bar tatal | ||||
|---|---|---|---|---|---|
| limpahan | bar tatal-selokan | Melimpah | Tidak meluap | Melimpah | Tidak meluap |
| tatal | kereta | G | G | ||
| stabil | GM | G | |||
| selalu | G | G | G | G | |
| kereta | G | ||||
| stabil | G | G | |||
| selalu | G | G | G | G | |
| kelihatan, tersembunyi, klip | kereta | ||||
| stabil | f? | f? | |||
| selalu | f? | f? | f? | f? | |
"G" mewakili kes di mana ruang disediakan untuk selokan bar tatal, "f?" kes di mana ruang disediakan untuk talang bar tatal jika daya ditentukan, dan sel kosong kes di mana ruang tidak dikhaskan.
Status Spesifikasi
The scrollbar-gutterharta ditakrifkan dalam Modul Limpahan Level 4, yang berada dalam status Draf Kerja. Ini bermaksud ini masih dalam proses dan dapat berubah antara sekarang dan masa draf beralih ke Cadangan Calon.
spesifikasi Overflow Module Level 3 adalah Draf Kerja juga, jadi itu merupakan petunjuk yang baik bahawa (1) akan memerlukan sedikit masa untuk scrollbar-guttermenjadi cadangan dan (2) masih banyak yang sedang berjalan.
Sokongan Penyemak Imbas
Tidak ada sokongan penyemak imbas semasa kemas kini terakhir.
Maklumat lanjut
- Draf Kerja Modul Limpahan CSS Tahap 4
- Isu GitHub # 92
- Kumpulan Kerja CSS Di TPAC: Apa Yang Baru Dalam CSS? Termasuk cadangan untuk jadual yang menguraikan tingkah laku nilai harta tanah.