Vue Academy · Pelajaran

Konfigurasi Perilaku Scroll

scrollBehavior(to, from, savedPosition), scroll mulus, scroll ke hash, serta pemulihan posisi.

Konfigurasi Perilaku Scroll adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengontrol Gulir saat Navigasi

Dalam aplikasi satu halaman, halaman tidak dimuat ulang, sehingga peramban tidak mengatur ulang guliran untuk Anda. Fungsi scrollBehavior milik Vue Router memungkinkan Anda menentukan posisi gulir halaman setelah setiap navigasi.

Lokasinya

Teruskan scrollBehavior saat membuat router. Fungsi ini berjalan pada setiap navigasi.

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return a position
  }
})

Tiga Parameter

Fungsi ini menerima to (route tujuan), from (route saat ini), dan savedPosition. Parameter terakhir hanya bernilai tidak-null saat navigasi dilakukan melalui tombol kembali/maju pada peramban.

Menggulir ke Atas untuk Route Baru

Perilaku paling sederhana: gulir ke bagian atas setiap kali pengguna berpindah ke halaman baru.

scrollBehavior(to, from, savedPosition) {
  return { top: 0 }
}

Memulihkan Posisi saat Kembali

Saat savedPosition tersedia, kembalikan nilai tersebut agar tombol kembali mengembalikan pengguna tepat ke posisi sebelumnya — sesuai dengan perilaku peramban bawaan.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  }
  return { top: 0 }
}

Mengapa savedPosition Penting

Tanpa memulihkan savedPosition, menekan tombol kembali akan menempatkan pengguna di bagian atas daftar panjang yang sebelumnya telah mereka gulir. Mengembalikan nilainya akan mempertahankan posisi mereka.

Menggulir ke Jangkar

Jika URL tujuan memiliki hash seperti #section, gulir ke elemen tersebut dengan mengembalikan pemilih el.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash }
  }
  return { top: 0 }
}

Gulir Halus

Tambahkan behavior: 'smooth' untuk menganimasikan guliran, bukan langsung melompat ke posisi tujuan.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, behavior: 'smooth' }
  }
}

Memberi Offset untuk Header Tetap

Header yang melekat dapat menutupi jangkar tujuan. Tambahkan top sebagai offset agar elemen berada di bawah header.

scrollBehavior(to) {
  if (to.hash) {
    return { el: to.hash, top: 80 }
  }
}

Menunda Guliran

Jika konten dimuat secara asinkron, kembalikan Promise yang menyelesaikan posisi setelah jeda agar target sudah tersedia saat proses gulir dijalankan.

scrollBehavior(to, from, savedPosition) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ top: 0 }), 300)
  })
}

Menggabungkan Aturan

Penangan lengkap memprioritaskan posisi tersimpan, lalu jangkar hash, dan terakhir menggunakan posisi bawaan di bagian atas.

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  if (to.hash) return { el: to.hash, behavior: 'smooth' }
  return { top: 0 }
}

Uji Cepat

Uji pengetahuan Anda tentang perilaku gulir.

Ringkasan

scrollBehavior mengontrol guliran saat navigasi:

Menerima to, from, dan savedPosition.
Kembalikan savedPosition untuk memulihkan posisi tombol kembali.
Kembalikan { el: to.hash } untuk menggulir ke jangkar.
Kembalikan { top: 0 } untuk navigasi baru ke route baru.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konfigurasi Perilaku Scroll” gratis?

Ya — teks lengkap “Konfigurasi Perilaku Scroll” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Konfigurasi Perilaku Scroll”?

scrollBehavior(to, from, savedPosition), scroll mulus, scroll ke hash, serta pemulihan posisi. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Konfigurasi Perilaku Scroll” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy