Scrollspy Gezinme Çubuğu Oluşturma

Web özellikleri: Kaydırma işaretçisi hedef sözde sınıfları scroll-target-group

Scrollspy gezinme, o anda görüntü alanında bulunan sayfa bölümüne karşılık gelen gezinme bağlantısını otomatik olarak vurgulayan yaygın bir kullanıcı arayüzü kalıbıdır. Bu sayede kullanıcılar, uzun bir dokümanda gezinirken nerede olduklarını net bir şekilde görebilir.

Bu model iki senaryoda yaygındır:

  • Tek sayfalı web siteleri: Birincil site gezinme bağlantılarının ayrı URL'ler yerine tek bir sayfanın farklı bölümlerine yönlendirdiği siteler.
  • Uzun içerikler: İçindekiler tablosu veya kenar çubuğu menüsü, kullanıcının bir makale, kılavuz ya da dokümandaki ilerleme durumunu izler.

Nasıl uygulanır?

Geleneksel olarak, kaydırma izleme kalıbı için JavaScript ve IntersectionObserver API'si gerekiyordu. Modern CSS, scroll-target-group özelliğini ve :target-current sözde sınıfını kullanarak bunu yapmanın yerel bir yolunu sunar.

  1. Gezinme bağlantılarının parça tanımlayıcılar kullandığından emin olun: Gezinme menünüz, içerik bölümlerinizin id değeriyle eşleşen parça tanımlayıcıları (ör. <a href="#section-1">) kullanarak aynı sayfadaki bölümleri işaret eden yer işareti bağlantılarından (<a>) oluşmalıdır.
  2. Kaydırma Hedefi Gruplandırmasını Etkinleştirme: scroll-target-group: auto özelliğini gezinme bağlantılarınızın kapsayıcısına uygulayın. Bu, tarayıcıya bu bağlantıları ilgili hedeflerini izleyen işaretçiler olarak değerlendirmesini söyler.
  3. Etkin bağlantıyı stillendirme: Gezinme bağlantılarınızda :target-current sözde sınıfını kullanarak hedef bölümleri kaydırma kapsayıcısında görünür olduğunda stiller uygulayın.
  4. Anlamsal durum: Kaydırma durduğunda etkin bağlantıdaki aria-current="true" değerini güncellemek için bir komut dosyası kullanın. Böylece durum, yardımcı teknolojilere doğru şekilde iletilir.

Örnek kod

Bu örnekte, kullanıcı bölümler arasında gezinirken sabit bir gezinme menüsündeki etkin bağlantı vurgulanmaktadır.


/* MANDATORY: The container of markers must have scroll-target-group: auto */
nav {
  /* Enables automatic tracking of fragment links */
  scroll-target-group: auto;
}
/* MANDATORY: Use :target-current to style the link whose target is in view. */
nav a:target-current {
  color: var(--accent, #007bff);
  border-bottom-color: var(--accent, #007bff);
}

<nav>
  <a href="#intro">Introduction</a>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
</nav>

<main>
  <!-- MANDATORY: Each section must have a unique ID matching a link fragment in the <nav>. -->
  <section id="intro">
    <h2>Introduction</h2>
    <!-- content -->
  </section>
  <section id="features">
    <h2>Features</h2>
    <!-- content -->
  </section>
  <section id="pricing">
    <h2>Pricing</h2>
    <!-- content -->
  </section>
</main>

<script type="module">
  if (CSS.supports('scroll-target-group: auto')) {
    const syncAriaCurrent = () => {
      const currentLink = document.querySelector('nav a:target-current');
      document.querySelectorAll('nav a').forEach(link => {
        link.setAttribute('aria-current', link === currentLink ? 'true' : 'false');
      });
    };
    // Update the aria on initial page load. Ensure the DOM content is loaded, either by using `<script type="module">` or an event listener for `DOMContentLoaded`.
    syncAriaCurrent();
    // Update the aria after scroll ends
    document.addEventListener('scrollend', syncAriaCurrent);
  }
</script>

En İyi Uygulamalar

  • Gezinme bağlantıları için özel bir kapsayıcıda scroll-target-group: auto KULLANIN: Bu, tarayıcının hangi bağlantıların izlenmesi gerektiğini bilmesini sağlar.
  • Hedeflerin, bağlantıların href özellikleriyle eşleşen benzersiz id özelliklere sahip olduğundan EMİN OLUN.
  • ÖNERİLİR Bölümler için yeterli dikey alan sağlayın: scroll-target-group, bölümler aynı anda yalnızca bir veya iki tanesi görülebilecek kadar büyük olduğunda görünür hedefi en net şekilde tanımlar.
  • ZORUNLU: Erişilebilirlik için görsel durum aria-current ile yansıtılmalıdır. :target-current, görsel yönü işlerken bu durum ekran okuyuculara gösterilmez.
  • Etkin durum için yalnızca renge güvenmekten AVOID: Yazı tipi kalınlığı, alt çizgi veya gösterge noktası gibi diğer görsel ipuçlarını ekleyin ya da renkler arasında yeterli kontrast olduğundan emin olun. Böylece, renk körlüğü olan kullanıcılar farkı anlayabilir.

Yedek stratejiler

scroll-target-group API'sini desteklemeyen tarayıcılar için IntersectionObserver API'sini temel alan bir yedek kullanmanız gerekir.

<script>
  // Feature detection for scroll-target-group
  const supportsScrollTargetGroup = CSS.supports('scroll-target-group: auto');

  if (!supportsScrollTargetGroup) {
    const navLinks = document.querySelectorAll('nav a');
    const sections = document.querySelectorAll('main section');

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id = entry.target.getAttribute('id');
          navLinks.forEach(link => {
            const isActive = link.getAttribute('href') === `#${id}`;
            // Use the escaped colon class for consistent styling
            link.classList.toggle('\:target-current', isActive);
            link.setAttribute('aria-current', isActive);
          });
        }
      });
    }, { rootMargin: '-50% 0px -50% 0px', threshold: 0 });

    sections.forEach(section => observer.observe(section));
  }
</script>

<style>
  /* Fallback style if :target-current is not supported.
     Use :is() to combine the native pseudo-class with a fallback class for older browsers. DO NOT use `nav a:target-current, nav a.\:target-current, as the unrecognized pseudoselector invalidates the entire rule in older browsers. */
  nav a:is(:target-current, .\:target-current) {
    color: var(--accent, #007bff);
    border-bottom-color: var(--accent, #007bff);
    font-weight: bold;
  }
</style>