Kaydırma Konumuna Duyarlı Öğeler

Web özellikleri: Kapsayıcı kaydırma durumu sorguları

Genel Bakış

"Başa Dön" bağlantısı gibi kayan düğmelerin kullanıcı deneyimini, yalnızca yararlı olduklarında göstererek iyileştirin. Bu kılavuzda, JavaScript kaydırma dinleyicilerine veya gözlemcilerine gerek kalmadan öğeleri kapsayıcılarının kaydırma konumuna göre stillendirmeye olanak tanıyan CSS container-scroll-state-queries kullanılarak bu öğelerin nasıl oluşturulacağı gösterilmektedir.

Uygulama

1. Kaydırma kapsayıcısını oluşturma

Kaydırma kapsayıcısı, kaydırma durumu sorgu kapsayıcısı olarak tanımlanmalıdır.

.scroller {
  overflow-y: auto;
  /* Establish this element as a scroll-state query container */
  container-type: scroll-state;
}

2. Kayan öğeyi biçimlendirme

Öğeyi kapsayıcının içine yerleştirin ve stilini belirleyin. Varsayılan olarak gizli olmalıdır.

.back-to-top {
  position: sticky;
  bottom: 20px;
  visibility: hidden;
  opacity: 0;
  translate: 0 20px;
  transition:
    visibility 0.3s,
    opacity 0.3s ease,
    translate 0.3s ease;
}

3. Kaydırma durumuna yanıt verme

@container kuralını scroll-state işleviyle kullanın. Kullanıcının aşağı kaydırıp kaydırmadığını kontrol etmek için kapsayıcının yukarı kaydırılabilir olup olmadığını kontrol edin.

/* When the container can be scrolled toward the top, it means the user has scrolled down */
@container scroll-state(scrollable: top) {
  .back-to-top {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
  }
}

Yedek stratejiler

Temel Yedek

container-scroll-state-queries desteklenmiyorsa kayan öğe, varsayılan visibility: hidden nedeniyle görünmez kalır. İşlevselliği sağlamak için öğeyi desteklenmeyen tarayıcılarda her zaman görünür hale getirmeyi seçebilirsiniz.

/* Fallback for browsers that do not support the feature */
.back-to-top {
  visibility: visible; /* Always visible */
  opacity: 1;
}

/* Override for supported browsers to handle dynamic visibility */
@supports (container-type: scroll-state) {
  .back-to-top {
    visibility: hidden;
    opacity: 0;
  }
  
  @container scroll-state(scrollable: top) {
    .back-to-top {
      visibility: visible;
      opacity: 1;
      translate: 0 0;
    }
  }
}

Gelişmiş Yedek (Intersection Observer)

Dinamik görünürlük gerekiyorsa kaydırıcının üst kısmındaki bir sentinel öğesi görünümden çıktığında bir sınıfı açıp kapatmak için IntersectionObserver kullanın.

<!-- Sentinel element placed at the top of the scroller -->
<div class="scroll-sentinel"></div>

/* Marker styling to ensure it does not affect layout */
.scroll-sentinel {
  height: 0;
  width: 0;
  visibility: hidden;
}

.scrolled .back-to-top {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
}

if (!CSS.supports('container-type', 'scroll-state')) {
  const sentinel = document.querySelector('.scroll-sentinel');
  const scroller = document.querySelector('.scroller');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // If the sentinel is NOT intersecting, it means the user has scrolled down
      if (!entry.isIntersecting) {
        scroller.classList.add('scrolled');
      } else {
        scroller.classList.remove('scrolled');
      }
    });
  }, { root: scroller });

  observer.observe(sentinel);
}