Arahan dan masa ia terpakai
Arahan temu duga: sebuah halaman mempunyai pengepala sticky, kad snap mendatar dan pembayang bahawa lebih banyak kandungan boleh diskrol. Bagaimanakah anda memutuskan masa untuk menukar gaya? Bandingkan pertanyaan scroll-state CSS dengan pendengar skrol JavaScript, dan terangkan perkara yang akan anda lakukan apabila penyemak imbas tiada sokongan.
Sempadannya ialah penggayaan deklaratif: menambah bayang apabila pengepala melekat (stuck), menyerlahkan kad yang tersnap, atau menunjukkan pembayang semasa lebih banyak kandungan boleh diskrol. Keadaan perniagaan, gerak isyarat kompleks, kemajuan skrol yang tepat dan pelaporan pelayan masih tergolong dalam JavaScript. MDN menerangkan empat keluarga pertanyaan scroll-state: scrollable, scrolled, snapped dan stuck.
Perkara yang dinilai oleh penemu duga
Penemu duga ingin melihat sama ada anda memilih API mengikut jenis keadaan dan kemudian mengendalikan kekangan sokongan serta kebolehcapaian. Jawapan yang mantap menyatakan bahawa bekas pertanyaan memerlukan container-type dan gaya tindak balas menyasarkan keturunan; ia juga mengelak daripada menganggap pertanyaan keadaan CSS sebagai sistem peristiwa umum.
Jawapan yang lemah hanya menghafal sintaks @container. Jawapan yang mantap menerangkan masa JavaScript masih diperlukan, cara menggunakan @supports untuk peningkatan progresif, cara menghormati prefers-reduced-motion dan cara menguji kes sebenar sticky, snap, limpahan serta penyemak imbas yang tidak disokong.
Soalan penjelasan sebelum anda menjawab
Mula-mula tanya sama ada keperluannya ialah maklum balas visual atau logik perniagaan. Bayang, warna dan keterlihatan pembayang sesuai untuk CSS; merekod arah skrol, membuat permintaan rangkaian atau memacu mesin keadaan memerlukan JavaScript.
Seterusnya sahkan sumber keadaan: adakah elemen tersebut benar-benar position: sticky, adakah senarai menetapkan scroll-snap-type dan adakah bekas skrol mempunyai limpahan yang boleh dilihat? Tanpa prasyarat tersebut, pertanyaan yang berkaitan kekal false.
Akhir sekali, sahkan garis dasar penyemak imbas dan keperluan pergerakan. Chrome for Developers mendokumenkan pertanyaan bekas scroll-state dalam Chrome 133; reka bentuk pengeluaran harus bermula dengan gaya yang tidak bergantung pada ciri tersebut, membalut peningkatan dalam supports dan menghormati pergerakan yang dikurangkan.
Rangka kerja jawapan 30 saat
Katakan sesuatu seperti:
"Saya akan memisahkan keadaan gaya daripada peristiwa perniagaan. Sticky, snap dan kebolehan skrol ialah keadaan penyemak imbas, jadi saya akan menetapkan container-type: scroll-state pada elemen yang berkaitan dan menggunakan @container dengan scroll-state untuk menggayakan keturunannya. Untuk analitik, kemajuan tepat atau tindakan perniagaan rentas komponen, saya akan mengekalkan JavaScript. Saya akan menjadikan CSS lalai boleh digunakan, menambah ciri di sebalik @supports, melumpuhkan pergerakan tidak penting untuk pengguna reduced-motion dan menguji limpahan, snap, input papan kekunci serta penyemak imbas yang tidak disokong."
Jawapan mendalam langkah demi langkah
Wujudkan bekas pertanyaan scroll-state
Isytiharkan elemen yang keadaannya akan ditanya sebagai bekas scroll-state. Berikannya nama apabila beberapa bekas mungkin sepadan:
.sticky-heading {
position: sticky;
top: 0;
container-type: scroll-state;
container-name: heading;
}Peraturan yang bertindak balas mesti menyasarkan keturunan, bukan elemen yang sama yang memiliki container-type. Panduan Chrome menunjukkan hubungan lapisan proksi ini secara eksplisit.
Pilih deskriptor mengikut keadaan
stuck bertanya sama ada elemen sticky dilekatkan pada tepi; snapped bertanya sama ada elemen akan tersnap pada bekas snap; scrollable bertanya sama ada limpahan kekal dalam sesuatu arah; scrolled bertanya tentang arah skrol terkini. Ia menjawab soalan yang berbeza dan tidak boleh ditukar ganti.
Sebagai contoh, tambahkan bayang pada navigasi semasa ia melekat (stuck):
@container heading scroll-state(stuck: top) {
.nav {
box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
}
}Letakkan sasaran gaya di bawah bekas
Menukar latar belakang secara langsung pada elemen yang memiliki container-type memudahkan pelanggaran peraturan pemisahan. Kekalkan pembalut dalaman sebagai sasaran tindak balas. Komponen kekal boleh diguna semula dan peralihan keadaan lebih mudah diuji.
Gunakan scrollable untuk kebolehtemuan (discoverability)
Untuk senarai kad mendatar, tunjukkan pembayang kecerunan sementara senarai itu masih boleh diskrol ke arah hujung sebarisnya:
.carousel {
container-type: scroll-state;
container-name: cards;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
@container cards scroll-state(scrollable: inline-end) {
.next-hint {
opacity: 1;
}
}Pembayang itu adalah tambahan. Jangan sampaikan "lebih banyak kandungan" hanya melalui warna; kekalkan penatalan papan kekunci, fokus yang boleh dilihat dan label teks.
Gunakan snapped untuk maklum balas kad semasa
snapped bermakna hanya apabila leluhur snap dan paksi snap yang sah wujud. Menyerlahkan kad semasa boleh meningkatkan maklum balas visual, tetapi ia bukan isyarat komitmen pemilihan perniagaan yang boleh dipercayai. Pemilihan sebenar masih memerlukan kawalan yang boleh diakses dan keadaan JavaScript.
Gunakan scrolled untuk maklum balas arah
Bar alat atas boleh bertindak balas terhadap arah skrol terkini, tetapi pergerakan berarah boleh menambah beban kognitif. Pastikan ia boleh diakses secara lalai; gunakan scrolled: block-start atau block-end hanya apabila faedahnya jelas, dan tambahkan peralihan.
Peningkatan progresif dan sandaran (fallback)
Gaya asas harus kekal boleh digunakan apabila scroll-state tidak disokong:
.nav {
box-shadow: none;
}
@supports (container-type: scroll-state) {
.sticky-heading {
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.nav {
box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
}
}
}Jika penyemak imbas lama mesti menerima pembayang yang serupa, gunakan sandaran IntersectionObserver atau ResizeObserver yang sempit. Jangan bina semula gelung peristiwa skrol penuh dalam sandaran.
Pergerakan dan pengesahan
Chrome mengesyorkan meletakkan pergerakan tidak penting di sebalik prefers-reduced-motion: no-preference. Uji tepi atas dan bawah, tiada limpahan, operasi papan kekunci, skrol sentuh, keadaan perantaraan snap, zum dan penyemak imbas yang tidak disokong. Sahkan bahawa perubahan keadaan tidak pernah menyembunyikan fokus atau kandungan.
Sampel jawapan berkualiti tinggi
"Mula-mula saya akan bertanya sama ada ini maklum balas visual atau peristiwa perniagaan. Untuk bayang sticky, serlahan snap atau pembayang skrol, saya akan menetapkan container-type: scroll-state pada elemen sticky atau snapping dan menggunakan pertanyaan stuck, snapped atau scrollable supaya keturunan bertindak balas. Analitik, pengiraan kemajuan dan penyerahan pemilihan kekal dalam JavaScript. Saya akan menghantar CSS lalai yang boleh digunakan, menambah peningkatan di sebalik @supports, mengekalkan sandaran statik dan mengurangkan pergerakan apabila diminta. Saya akan menguji limpahan sebenar, snap, input papan kekunci dan penyemak imbas lama."
Kesilapan biasa
Menganggap scroll-state sebagai peristiwa skrol
Corak kegagalan: menggunakan pertanyaan untuk mencetuskan analitik, permintaan atau penyerahan perniagaan. Sebab ia gagal: CSS menyatakan syarat gaya, bukan muatan peristiwa atau pemasaan perniagaan yang boleh dipercayai. Pembetulan: kekalkan penggayaan dalam CSS dan tindakan perniagaan dalam kawalan semantik ditambah JavaScript.
Melupakan bekas pertanyaan
Corak kegagalan: menulis @container scroll-state(stuck: top) tanpa container-type: scroll-state. Sebab ia gagal: penyemak imbas tidak mempunyai sumber keadaan untuk dinilai. Pembetulan: sahkan prasyarat sticky, snap atau limpahan, kemudian isytiharkan bekas yang dinamakan.
Menggayakan bekas itu sendiri
Corak kegagalan: menjadikan satu elemen sebagai bekas dan sasaran gaya keadaan sekali gus. Sebab ia gagal: pertanyaan menyasarkan keturunan, dan strukturnya menjadi rapuh. Pembetulan: tambahkan pembalut dalaman dan gunakan maklum balas keadaan di situ.
Menggantikan maklum balas yang boleh diakses dengan warna sahaja
Corak kegagalan: menukar warna sahaja untuk menunjukkan kad snap semasa atau lebih banyak kandungan. Sebab ia gagal: warna sahaja tidak menyampaikan keadaan dengan pasti dan boleh mengecualikan pengguna berpenglihatan rendah. Pembetulan: sediakan teks, fokus, kawalan atau pembayang skrol yang boleh diambil tindakan.
Mengabaikan sempadan sokongan dan pergerakan
Corak kegagalan: menganggap setiap penyemak imbas menyokong ciri tersebut dan memaksa pergerakan semasa skrol. Sebab ia gagal: penyemak imbas lama merosot prestasinya dan pergerakan boleh menyebabkan ketidakselesaan. Pembetulan: gunakan @supports, kekalkan lalai boleh digunakan dan hormati reduced-motion.
Susulan dan respons
Bagaimana jika anda memerlukan peratusan skrol yang tepat?
scroll-state mendedahkan keadaan diskret, bukan peratusan berterusan. Gunakan JavaScript untuk membaca julat skrol dan pendikit kemas kini (throttle), mengasingkan pembacaan, pengiraan dan penulisan supaya setiap peristiwa skrol tidak mencetuskan reka letak secara segerak.
Bagaimana jika pertanyaan sticky sentiasa false?
Semak blok yang mengandungi elemen sticky, top atau inset, limpahan leluhur dan sama ada elemen itu benar-benar memasuki julat sticky-nya. Hanya selepas itu periksa container-type dan pemilih keturunan.
Bagaimana jika serlahan snap berkelip-kelip (flicker)?
Semak paksi snap, scroll-snap-align dan dimensi sasaran. Elakkan peralihan pada sifat yang kerap mengubah reka letak. Pastikan fokus dan keadaan pemilihan eksplisit; penyerlahan hanyalah keadaan visual.
Bagaimana jika penyemak imbas lama mesti kelihatan sama?
Tentukan gaya statik yang boleh digunakan dahulu, kemudian tambahkan sandaran kecil IntersectionObserver atau ResizeObserver untuk pembayang utama. Jangan salin sistem pendengar skrol yang kompleks; jika peningkatan kosnya lebih tinggi daripada bantuannya, terima bayang statik atau pembayang yang sentiasa kelihatan.
Bagaimana jika pengguna lebih suka pergerakan dikurangkan?
Kekalkan hierarki maklumat tanpa translasi atau penskalaan paksa. Tukar hanya bayang, sempadan atau warna statik, dan biarkan prefers-reduced-motion mengatasi peralihan dan animasi.