Menetapkan target scroll untuk render awal

Fitur web: scroll-initial-target scrollIntoView()

Properti CSS scroll-initial-target menawarkan cara deklaratif khusus CSS untuk membawa elemen turunan tertentu ke area yang terlihat dari penampung scroll-nya segera setelah penampung tersebut dirender. Sebelumnya, developer mengandalkan JavaScript (Element.scrollIntoView()) atau ID fragmen URL (#item-id), yang keduanya memiliki batasan dan sulit diterapkan.

Cara Menerapkan

Agar berhasil menerapkan ini:

  1. Pastikan ada container scroll: Elemen target harus berada di dalam container scroll (elemen dengan overflow yang memungkinkan scroll, seperti overflow: auto). Elemen ini dapat berupa elemen ancestor apa pun, termasuk elemen root <html>.
  2. Targetkan Item: Terapkan scroll-initial-target: nearest ke elemen turunan tertentu yang ingin Anda tampilkan.

Contoh Kode: Feed Media Vertikal

Dalam contoh ini, feed mulai di-scroll ke item "unggulan" tertentu, bukan ke bagian paling atas daftar.

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

Penerapan Strategis & Praktik Terbaik

  • LAKUKAN penggunaan scroll-initial-target untuk pengalaman "mulai dari tengah", seperti kalender yang dimulai pada hari ini atau galeri yang dimulai pada gambar tertentu.
  • JANGAN bingung membedakannya dengan fokus aksesibilitas. Properti ini hanya memindahkan area pandang visual; properti ini tidak memindahkan fokus keyboard. Anda harus mengelola element.focus() secara manual jika target dimaksudkan sebagai titik awal bagi pengguna keyboard.
  • JANGAN gunakan ini jika Anda memerlukan animasi "scrolling" yang mulus saat dimuat; properti ini bersifat diskret dan menetapkan posisi secara instan selama fase tata letak.
  • JANGAN tetapkan scroll-initial-target pada beberapa elemen dalam penampung yang dapat di-scroll yang sama. Jika beberapa elemen menentukan scroll-initial-target: nearest, browser akan memilih elemen yang muncul pertama dalam urutan hierarki DOM.
  • LAKUKAN: Berikan dimensi untuk media. Karena posisi scroll dihitung selama tata letak awal, pastikan gambar atau video memiliki aspect-ratio atau height/width tetap untuk mencegah target bergeser setelah media dimuat.
  • LAKUKAN penghitungan untuk Hierarki Prioritas: Fragmen URL (misalnya, example.com/#top) dan properti scroll-start tingkat penampung lebih diprioritaskan daripada scroll-initial-target.

Strategi Penggantian

Untuk browser yang belum mendukung API, gunakan penggantian JavaScript. Gunakan peristiwa DOMContentLoaded untuk memastikan browser men-scroll elemen ke tampilan segera setelah penguraian HTML selesai, sehingga memberikan pengalaman yang lebih cepat daripada menunggu semua gambar dan resource dimuat. Atau, menempatkan skrip di akhir elemen <body> juga dapat diterima dan tidak memerlukan pemroses peristiwa.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});