Vue Academy · Ders

Kaydırma Davranışını Yapılandırma

scrollBehavior(to, from, savedPosition), yumuşak kaydırma, hash'e kaydırma ve konumu geri yükleme.

Kaydırma Davranışını Yapılandırma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Gezinmede Kaydırmayı Denetleme

Tek sayfalı bir uygulamada sayfa yeniden yüklenmez; bu nedenle tarayıcı kaydırma konumunu sizin için sıfırlamaz. Vue Router'ın scrollBehavior işlevi, her gezinmeden sonra sayfanın nereye kaydırılacağına karar vermenizi sağlar.

Nerede Bulunur?

Yönlendiriciyi oluştururken scrollBehavior değerini geçirin. Bu değer her gezinmede çalışır.

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

Üç Parametre

to (hedef rota), from (geçerli rota) ve savedPosition değerlerini alır. Son değer yalnızca tarayıcının geri veya ileri düğmeleriyle gezinirken null değildir.

Yeni Rotalar için Başa Kaydırma

En basit davranış şudur: kullanıcı yeni bir sayfaya gittiğinde her seferinde sayfanın başına kaydırmak.

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

Geri Dönüşte Konumu Geri Yükleme

savedPosition mevcut olduğunda onu döndürün; böylece geri düğmesi kullanıcıyı tarayıcıdaki yerel davranışla aynı şekilde tam olarak bulunduğu konuma götürür.

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

savedPosition Neden Önemlidir?

savedPosition geri yüklenmezse geri düğmesine basmak, kullanıcıyı kaydırarak incelediği uzun bir listenin en üstüne götürür. Bu değeri döndürmek bulunduğu yeri korur.

Bir Çapaya Kaydırma

Hedef URL'de #section gibi bir karma değeri varsa el seçicisi döndürerek o öğeye kaydırın.

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

Akıcı Kaydırma

Anında sıçramak yerine kaydırmayı canlandırmak için behavior: 'smooth' ekleyin.

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

Sabit Üst Bilgi için Ofset Ekleme

Sabit duran bir üst bilgi hedef çapayı kapatabilir. Öğenin üst bilginin altında konumlanması için ofset olarak top ekleyin.

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

Kaydırmayı Geciktirme

İçerik eşzamansız olarak yükleniyorsa, kaydırma çalıştığında hedefin mevcut olması için gecikmeden sonra konumla çözümlenen bir Promise döndürün.

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

Kuralları Birleştirme

Tam bir işleyici, önce kaydedilmiş konuma, ardından karma çapalarına, son olarak da varsayılan olarak başa öncelik verir.

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

Hızlı Kontrol

Kaydırma davranışı konusundaki bilginizi sınayın.

Özet

scrollBehavior, gezinme sırasında kaydırmayı denetler:

to, from ve savedPosition değerlerini alır.
Geri düğmesindeki konumu geri yüklemek için savedPosition değerini döndürün.
Bir çapaya kaydırmak için { el: to.hash } döndürün.
Yeni rotalara yapılan yeni gezinmelerde { top: 0 } döndürün.

Sıkça Sorulan Sorular

“Kaydırma Davranışını Yapılandırma” dersi ücretsiz mi?

Evet — “Kaydırma Davranışını Yapılandırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Kaydırma Davranışını Yapılandırma” dersinde ne öğreneceğim?

scrollBehavior(to, from, savedPosition), yumuşak kaydırma, hash'e kaydırma ve konumu geri yükleme. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Kaydırma Davranışını Yapılandırma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön