İlk oluşturma için kaydırma hedefi ayarlama

Web özellikleri: scroll-initial-target scrollIntoView()

CSS özelliği scroll-initial-target, belirli bir alt öğeyi, kaydırma kapsayıcısı oluşturulur oluşturulmaz görünür alanına getirmek için bildirim temelli, yalnızca CSS içeren bir yöntem sunar. Daha önce geliştiriciler, JavaScript (Element.scrollIntoView()) veya URL parça tanımlayıcılarına (#item-id) güveniyordu. Ancak her ikisinin de sınırlamaları vardır ve uygulanması zordur.

Nasıl uygulanır?

Bunu başarıyla uygulamak için:

  1. Kaydırma kapsayıcısı olduğundan emin olun: Hedef öğe, kaydırma kapsayıcısının (overflow: auto gibi kaydırmaya izin veren taşma içeren bir öğe) içinde olmalıdır. Bu, kök <html> öğesi de dahil olmak üzere herhangi bir üst öğe olabilir.
  2. Öğeyi hedefleyin: Görüntülemek istediğiniz belirli alt öğeye scroll-initial-target: nearest uygulayın.

Örnek Kod: Dikey Medya Feed'i

Bu örnekte, feed listenin en üstünden değil, belirli bir "öne çıkan" öğeye kaydırılmış olarak başlar.

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

Stratejik Uygulama ve En İyi Uygulamalar

  • "Ortadan başlayan" deneyimler (ör. geçerli günde başlayan bir takvim veya belirli bir resimle başlayan galeri) için scroll-initial-target KULLANIN.
  • Bunu erişilebilirlik odağıyla KARIŞTIRMAYIN. Bu özellik yalnızca görsel görüntü alanını taşır, klavye odağını taşımaz. Hedefin klavye kullanıcıları için başlangıç noktası olması amaçlanıyorsa element.focus() öğesini manuel olarak yönetmeniz gerekir.
  • Yükleme sırasında sorunsuz bir "kaydırma" animasyonuna ihtiyacınız varsa bu özelliği KULLANMAYIN. Bu özellik ayrıktır ve düzen aşamasında konumu anında ayarlar.
  • Aynı kaydırılabilir kapsayıcıdaki birden fazla öğede scroll-initial-target AYARLAMAYIN. Birden fazla öğe scroll-initial-target: nearest değerini belirtiyorsa tarayıcı, DOM ağacı sırasında ilk görünen öğeyi seçer.
  • Medya için boyutları MUTLAKA belirtin. Kaydırma konumu ilk düzen sırasında hesaplandığından, medyanın yüklenmesinden sonra hedefin kaymasını önlemek için resimlerin veya videoların aspect-ratio ya da sabit height/width değerlerine sahip olduğundan emin olun.
  • Öncelik hiyerarşisini göz önünde bulundurun: URL parçası (ör. example.com/#top) ve kapsayıcı düzeyindeki scroll-start mülkü, scroll-initial-target mülküne göre önceliklidir.

Yedek strateji

API'yi henüz desteklemeyen tarayıcılar için yedek JavaScript kullanın. HTML ayrıştırma işlemi tamamlanır tamamlanmaz tarayıcının öğeyi görünür hale getirmesini sağlamak için DOMContentLoaded etkinliğini kullanın. Bu sayede, tüm resimlerin ve kaynakların yüklenmesini beklemekten daha hızlı bir deneyim sunabilirsiniz. Alternatif olarak, komut dosyasını <body> öğesinin sonuna yerleştirmek de kabul edilebilir ve etkinlik işleyici ihtiyacını ortadan kaldırır.

/**
 * 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" });
    }
  }
});