Tarik untuk Menampilkan

Fitur web: scroll-initial-target Pengepasan posisi scroll

"Tarik untuk menampilkan" adalah pola UI tempat konten (seperti kotak penelusuran atau kontrol muat ulang) disembunyikan di atas area yang dapat di-scroll saat pemuatan awal, dan pengguna dapat menarik ke bawah (men-scroll ke atas) untuk menampilkannya. Pola ini umum digunakan di aplikasi seluler dan aplikasi web untuk kotak penelusuran, filter, dan kontrol sekunder lainnya yang harus dapat diakses, tetapi tidak langsung terlihat.

Properti CSS scroll-initial-target menawarkan cara deklaratif khusus CSS untuk menerapkan pola ini. Dengan menetapkan scroll-initial-target: nearest pada elemen konten utama, penampung scroll akan dirender dengan konten tersembunyi yang di-scroll keluar dari tampilan. Sebelumnya, developer mengandalkan JavaScript (Element.scrollIntoView()) atau ID fragmen URL (#content-id) untuk mencapai hal ini, yang keduanya memiliki batasan dan sulit diterapkan.

Cara Menerapkan

Untuk menerapkan pola tarik untuk menampilkan:

  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. Tentukan elemen tersembunyi: Tempatkan konten yang ingin Anda sembunyikan (misalnya, kotak penelusuran) sebagai turunan pertama di dalam penampung scroll. Elemen ini akan di-scroll keluar dari tampilan saat pemuatan awal.
  3. Tentukan konten utama: Tempatkan elemen konten utama tepat setelah elemen tersembunyi. Ini adalah elemen yang harus dilihat pengguna terlebih dahulu.
  4. Targetkan konten utama: Terapkan scroll-initial-target: nearest ke elemen konten utama sehingga penampung scroll dirender dengan konten tersebut di-scroll ke tampilan, sehingga menyembunyikan elemen di atasnya.
  5. Tambahkan pengepasan posisi scroll: Untuk memastikan elemen tersembunyi selalu terlihat sepenuhnya atau tersembunyi sepenuhnya (dan tidak berada dalam status di-scroll sebagian), tambahkan scroll-snap-type: y mandatory ke penampung scroll dan scroll-snap-align: start ke elemen tersembunyi dan elemen konten utama.
/**
 * ANCESTOR: Define the scroll container.
 * Scroll snapping ensures the search bar is always
 * either fully visible or fully hidden.
 */
.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/**
 * HIDDEN ELEMENT: The search bar hidden above the fold on load.
 * It has scroll-snap-align so it snaps into place when pulled down.
 */
.search-bar {
  height: 60px;
  scroll-snap-align: start;
}

/**
 * MAIN CONTENT + TARGET: The element the user sees first.
 * scroll-snap-align makes it a valid snap point.
 * scroll-initial-target tells the browser to scroll here on
 * initial render, hiding the search bar above it.
 */
.main-content {
  scroll-snap-align: start;
  scroll-initial-target: nearest;
}

Penerapan Strategis & Praktik Terbaik

  • LAKUKAN penggunaan scroll-initial-target: nearest saat Anda ingin menarik perhatian pengguna ke bagian tertentu dari area yang dapat di-scroll saat dimuat dan sengaja menyembunyikan unit UI periferal seperti kotak penelusuran di bagian paling atas.
  • 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 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. Perhatikan bahwa untuk menarik konten agar terlihat, Anda ingin konten utama terikat ke start (atas) penampung.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const targetContent = document.querySelector('.main-content.target');
    if (targetContent) {
      // Use behavior: "instant" to mimic the native CSS behavior
      // 'block: start' should match your CSS 'scroll-snap-align' (or expected top position)
      targetContent.scrollIntoView({ behavior: 'instant', block: 'start' });
    }
  }
});