Görüntülemek için aşağı çekin

Web özellikleri: scroll-initial-target Kaydırarak tutturma

"Çekerek gösterme", içeriğin (arama çubuğu veya yenileme kontrolü gibi) ilk yüklemede kaydırılabilir bir alanın üst kısmında gizlendiği ve kullanıcının aşağı çekerek (yukarı kaydırarak) gösterebileceği bir kullanıcı arayüzü modelidir. Bu model, mobil uygulamalarda ve web uygulamalarında arama çubukları, filtreler ve erişilebilir olması gereken ancak hemen görünür olmayan diğer ikincil kontroller için en çok tercih edilen şekilde kullanılır.

CSS özelliği scroll-initial-target, bu kalıbı uygulamak için yalnızca CSS'ye dayalı, açıklayıcı bir yöntem sunar. Ana içerik öğesinde scroll-initial-target: nearest ayarlandığında kaydırma kapsayıcısı, gizli içerik görünümden kaydırılarak oluşturulur. Daha önce geliştiriciler bunu başarmak için JavaScript (Element.scrollIntoView()) veya URL parça tanımlayıcılarına (#content-id) güveniyordu. Her ikisinin de sınırlamaları vardır ve uygulanması zordur.

Nasıl uygulanır?

Çekerek gösterme desenini 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. Gizli öğeyi tanımlayın: Gizlemek istediğiniz içeriği (ör. arama çubuğu) kaydırma kapsayıcısının ilk alt öğesi olarak yerleştirin. Bu öğe, ilk yüklemede kaydırılarak görünümden çıkarılacak.
  3. Ana içeriği tanımlayın: Ana içerik öğesini gizli öğenin hemen arkasına yerleştirin. Bu, kullanıcının ilk görmesi gereken öğedir.
  4. Ana içeriği hedefleyin: Ana içerik öğesine scroll-initial-target: nearest uygulayın. Böylece kaydırma kapsayıcısı, görünümde kaydırılmış olarak oluşturulur ve üstündeki öğe gizlenir.
  5. Kaydırarak tutturma ekleyin: Gizli öğenin her zaman tamamen görünür veya tamamen gizli olmasını (ve kısmen kaydırılmış bir durumda kalmamasını) sağlamak için kaydırma kapsayıcısına scroll-snap-type: y mandatory, hem gizli öğeye hem de ana içerik öğesine scroll-snap-align: start ekleyin.
/**
 * 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;
}

Stratejik Uygulama ve En İyi Uygulamalar

  • Kullanıcının dikkatini, sayfa yüklendiğinde kaydırılabilir bir alanın belirli bir bölümüne çekmek ve en üstteki arama çubuğu gibi çevre birimi kullanıcı arayüzü birimlerini kasıtlı olarak gizlemek istediğinizde scroll-initial-target: nearest 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.
  • Ö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. İçeriği çekerek gösterme işleminde, ana içeriğin kapsayıcının start (üst) kısmına bağlı olmasını istersiniz.

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