Permintaan dan konteks
Halaman memiliki tautan ke bagian artikel atau item korsel dan harus menyorot target saat ini saat menggulir. CSS scroll-target-group dapat mendeklarasikan wadah navigasi yang ada sebagai grup penanda gulir, menghubungkan target fragmen dengan konten yang terlihat. Jelaskan batasannya dengan IntersectionObserver, jangkar tradisional, dan scroll-marker-group, lalu rancang peningkatan progresif.
Hal yang dinilai oleh pewawancara
Pewawancara mencari tautan nyata yang berfungsi sebelum status visual ditambahkan. Jawaban yang kuat membedakan posisi gulir, posisi fokus, dan penataan gaya item saat ini; menangani target duplikat, konten dinamis, pengguliran horizontal, dan pengurangan gerakan (reduced motion); serta menjelaskan fallback ketika properti eksperimental tidak tersedia. Satu deklarasi CSS tidak menunjukkan sistem navigasi yang dapat dioperasikan.
Pertanyaan untuk diklarifikasi sebelum menjawab
Apa target navigasinya?
Konfirmasikan apakah setiap tautan menargetkan ID bagian yang stabil, kartu korsel, atau item daftar virtual. Target harus dapat dialamatkan oleh browser dan mempertahankan maknanya saat daftar diurutkan ulang.
Bagaimana “saat ini” (current) didefinisikan?
Klarifikasi apakah itu berarti memasuki viewport, melewati batas ambang tertentu, menerima fokus, atau menjadi item terakhir yang diklik. Status gulir dan fokus bisa berbeda, sehingga satu aturan warna tidak dapat mewakili keduanya.
Dukungan dan alternatif
Buat daftar browser target, pembaca layar, dan persyaratan keyboard. scroll-target-group bersifat eksperimental; jangkar tradisional dan logika observasi apa pun yang diperlukan harus tetap berfungsi secara independen.
Kerangka jawaban 30 detik
“Pertama-tama saya menggunakan navigasi semantik dan jangkar yang stabil untuk lompatan dasar, lalu mendeklarasikan wadah navigasi sebagai scroll-target-group sehingga target dapat menerima gaya saat ini ketika memasuki viewport. Penanda gulir tidak mengelola fokus, jadi saya menguji urutan Tab, fokus setelah lompatan, dan jalur kembali secara terpisah. Setelah konten dinamis membuat target, saya memeriksa ulang hubungannya. Di browser yang tidak mendukung, saya mempertahankan tautan normal dan hanya menambahkan peningkatan IntersectionObserver yang diperlukan, lalu menguji keyboard, pembaca layar, pengguliran horizontal, dan pengaturan reduced-motion dari ujung ke ujung.”
Jawaban mendalam langkah demi langkah
Langkah 1: Buat jangkar yang stabil
Hasilkan ID yang unik dan dapat diprediksi untuk setiap bagian atau item dan gunakan target fragmen nyata dalam tautan navigasi. Jangan hanya mengandalkan indeks array karena pemfilteran, paginasi, dan rendering sisi server dapat mengubahnya.
Langkah 2: Deklarasikan grup penanda gulir
Di browser yang didukung, atur scroll-target-group: auto pada wadah daftar isi atau kontrol korsel. Ini memungkinkan tautan fragmen berpartisipasi dalam hubungan penanda gulir, tetapi tidak merancang fokus atau semantik untuk Anda.
Langkah 3: Pisahkan penataan gaya saat ini dan fokus
Gunakan status current-target atau yang setara untuk mengekspresikan posisi gulir, dan :focus-visible untuk mengekspresikan fokus keyboard. Ketika keduanya ada, pertahankan kontras, label yang mudah dipahami, dan transisi yang tidak berlebihan.
Langkah 4: Tangani wadah dinamis dan ganda
Setelah bagian dimuat, korsel melakukan perulangan, atau wadah gulir bersarang berubah, periksa kembali keunikan target dan stabilitas item saat ini. Jangan biarkan satu tautan ditafsirkan oleh beberapa wadah gulir; pisahkan grup bila diperlukan.
Langkah 5: Rancang fallback dan verifikasi
Ketika properti tidak didukung, jangkar normal harus tetap dapat melompat. Tambahkan IntersectionObserver hanya sebagai peningkatan untuk indikasi item saat ini. Uji keyboard, pembaca layar, tombol kembali browser, zoom, gulir horizontal, dan prefers-reduced-motion.
Contoh jawaban berkualitas tinggi
Pertama-tama saya akan membuat ID yang stabil untuk bagian artikel dan menggunakan tautan daftar isi yang sebenarnya sehingga lompatan berfungsi tanpa CSS. Jika browser target mendukungnya, saya akan mengatur scroll-target-group: auto pada wadah navigasi dan menyorot target saat ini sambil menjaga fokus keyboard tetap terlihat dengan :focus-visible. Penanda gulir tidak memindahkan fokus ke dalam konten, jadi saya akan memverifikasi perilaku fokus dan jalur kembali setelah aktivasi tautan yang disengaja. Untuk pemuatan tak terbatas atau korsel, saya akan memeriksa keunikan ID dan stabilitas item saat ini setiap kali target ditambahkan. Browser yang tidak didukung akan mempertahankan jangkar dengan peningkatan observer untuk status; saya akan menyelesaikannya dengan pengujian tugas pada desktop, seluler, pembaca layar, dan pengaturan reduced-motion.
Kesalahan umum
- Kesalahan: Menyediakan status CSS tanpa tautan jangkar yang sebenarnya. → Mengapa ini gagal: Browser yang tidak didukung dan teknologi asistif kehilangan navigasi. → Solusi: Bangun tautan semantik yang berfungsi secara independen.
- Kesalahan: Memperlakukan item yang terlihat sebagai fokus keyboard. → Mengapa ini gagal: Pengguna dapat memfokuskan navigasi tanpa menggulir konten, sehingga statusnya bertentangan. → Solusi: Rancang status saat ini dan
:focus-visiblesecara terpisah. - Kesalahan: Menghasilkan ID target dari indeks array. → Mengapa ini gagal: Pemfilteran dan pemuatan berulang membuat duplikat atau pergeseran. → Solusi: Gunakan pengidentifikasi bisnis yang stabil dan periksa keunikan setelah pembaruan.
- Kesalahan: Merilis properti eksperimental sebagai persyaratan mutlak. → Mengapa ini gagal: Dukungan browser dan perilaku gulir bersarang bervariasi. → Solusi: Pertahankan jangkar, tingkatkan berdasarkan kemampuan, dan pantau penyelesaian tugas.
Pertanyaan lanjutan dan tanggapan
Tindak lanjut 1: Mengapa tidak hanya menggunakan IntersectionObserver?
Observer berguna untuk dukungan browser yang ada atau ambang batas bisnis yang kompleks; scroll-target-group dapat mengurangi kode status ini. Keduanya dapat dilapisi: pertahankan tautan dan fokus terlebih dahulu, lalu bandingkan biaya pemeliharaannya.
Tindak lanjut 2: Bisakah korsel horizontal dan daftar isi vertikal berbagi satu grup?
Biasanya tidak. Sumbu gulir, visibilitas target, dan model keyboard mereka berbeda, sehingga arti satu item saat ini menjadi ambigu. Pisahkan grup berdasarkan wadah gulir dan beri label secara independen.
Tindak lanjut 3: Haruskah fokus berpindah secara otomatis ketika bagian saat ini berubah?
Jangan memindahkan fokus untuk pengguliran pasif karena hal itu mengganggu pengguna keyboard. Pindahkan fokus hanya setelah aktivasi navigasi yang disengaja, sesuai dengan kontrak komponen, dan berikan hasil yang jelas kepada pembaca layar.
Tindak lanjut 4: Bagaimana Anda menangani reduced motion?
Kurangi atau hilangkan pengguliran halus dan transisi penanda sambil mempertahankan status saat ini yang jelas dan indikator fokus. Navigasi harus tetap dapat dipahami tanpa animasi.