Wskazówki dotyczące możliwości przewijania

Funkcje internetowe: Zapytania o stan przewijania kontenera

Przegląd

Wskazówki wizualne, takie jak cienie lub gradienty, pomagają użytkownikom zrozumieć, że mogą przewijać, aby zobaczyć więcej treści. Z tego przewodnika dowiesz się, jak utworzyć te wskazówki za pomocą CSS container-scroll-state-queries, który umożliwia stylizowanie elementów na podstawie stanu przewijania ich kontenera bez polegania na detektorach lub obserwatorach przewijania JavaScriptu.

Implementacja

1. Tworzenie kontenera przewijania

Kontener przewijania musi być zadeklarowany jako kontener zapytania o stan przewijania.

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

2. Stylizowanie wskaźników

Umieść elementy wskaźnika (takie jak cienie, gradienty lub strzałki) w kontenerze i nadaj im styl. Domyślnie nie powinny być widoczne. Gdy się wyświetlają, nie powinny być interaktywne, co można osiągnąć przez ustawienie pointer-events: none.

.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. Sprawdzanie stanu przewijania

Użyj reguły @container z funkcją scroll-state. Sprawdź, czy kontener można przewijać w górę lub w dół, aby wyświetlić odpowiedni wskaźnik.

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

Strategie zastępcze

Podstawowy fallback

Jeśli funkcja nie jest obsługiwana, wskaźniki pozostaną niewidoczne. Ponieważ są to wskazówki, które nie są kluczowe dla działania, można je pominąć w nieobsługiwanych przeglądarkach.

Zaawansowany fallback (Intersection Observer)

Jeśli wskazówki są wymagane, użyj IntersectionObserver, aby przełączać klasy, gdy elementy wartownicze u góry i u dołu paska przewijania przesuwają się do i z obszaru przewijania.

<!-- 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);
}