Kaydırılabilirlik Özelliği İpuçları

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

Genel Bakış

Gölge veya gradyan gibi görsel ipuçları, kullanıcıların daha fazla içerik görmek için kaydırabileceklerini anlamalarına yardımcı olur. Bu kılavuzda, JavaScript kaydırma dinleyicilerine veya gözlemcilere ihtiyaç duymadan, kapsayıcılarının kaydırılabilir durumuna göre öğeleri stillendirmeye olanak tanıyan CSS container-scroll-state-queries kullanarak bu ipuçlarının 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;
  position: relative;
}

2. Göstergeleri biçimlendirme

Gösterge öğelerini (gölgeler, degradeler veya oklar gibi) kapsayıcının içine yerleştirin ve bunlara stil uygulayın. Varsayılan olarak görünür olmamaları gerekir. Gösterildiklerinde, pointer-events: none ayarlanarak etkileşimli olmamaları gerekir.

.indicator-top, .indicator-bottom {
  position: sticky;
  left: 0;
  right: 0;
  height: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none; /* Let clicks pass through */
}

.indicator-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent); /* Example: Shadow */
}

.indicator-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); /* Example: Shadow */
}

3. Kaydırma durumunu sorgulama

@container kuralını scroll-state işleviyle kullanın. İlgili göstergeyi göstermek için kapsayıcının yukarı veya aşağı kaydırılabilir olup olmadığını kontrol edin.

/* Show top indicator when the user can scroll up */
@container scroll-state(scrollable: top) {
  .indicator-top {
    opacity: 1;
  }
}

/* Show bottom indicator when the user can scroll down */
@container scroll-state(scrollable: bottom) {
  .indicator-bottom {
    opacity: 1;
  }
}

Yedek stratejiler

Temel Yedek

Özellik desteklenmiyorsa göstergeler görünmez. Bunlar ipucu olduğundan ve işlevsellik açısından kritik olmadığından, desteklenmeyen tarayıcılarda atlanabilir.

Gelişmiş Yedek (Intersection Observer)

İpuçları gerekiyorsa kaydırıcının üst ve alt kısmındaki sentinel öğeler kaydırma alanına girip çıktığında sınıfları değiştirmek için IntersectionObserver kullanın.

<!-- Sentinel elements placed at the ends of the scroller -->
<div class="sentinel-top"></div>
<!-- Content goes here -->
<div class="sentinel-bottom"></div>

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

.scroller.scrolled-down .indicator-top {
  opacity: 1;
}

.scroller.can-scroll-down .indicator-bottom {
  opacity: 1;
}

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

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.target === topSentinel) {
        // If top sentinel is not intersecting, we have scrolled down
        scroller.classList.toggle('scrolled-down', !entry.isIntersecting);
      }
      if (entry.target === bottomSentinel) {
        // If bottom sentinel is intersecting, we reached the bottom
        scroller.classList.toggle('can-scroll-down', !entry.isIntersecting);
      }
    });
  }, { root: scroller });

  observer.observe(topSentinel);
  observer.observe(bottomSentinel);
}