Hinweise zur Scrollbarkeit

Webfunktionen: Container-Scrollstatusabfragen

Übersicht

Visuelle Hinweise wie Schatten oder Farbverläufe helfen Nutzern zu erkennen, dass sie scrollen können, um mehr Inhalte zu sehen. In diesem Leitfaden erfahren Sie, wie Sie diese Hinweise mit CSS-container-scroll-state-queries erstellen. So können Sie Elemente basierend auf dem scrollbaren Status ihres Containers formatieren, ohne auf JavaScript-Scroll-Listener oder -Observer angewiesen zu sein.

Implementierung

1. Scroll-Container einrichten

Der Scrollcontainer muss als Scrollstatus-Abfragecontainer deklariert werden.

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

2. Indikatoren gestalten

Platzieren Sie die Indikatorelemente (z. B. Schatten, Farbverläufe oder Pfeile) im Container und gestalten Sie sie. Standardmäßig sollten sie nicht sichtbar sein. Wenn sie angezeigt werden, sollten sie nicht interaktiv sein. Legen Sie dazu pointer-events: none fest.

.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. Scrollstatus abfragen

Verwenden Sie die Regel @container mit der Funktion scroll-state. Prüfen Sie, ob der Container nach oben oder unten scrollbar ist, um die entsprechende Anzeige einzublenden.

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

Fallback-Strategien

Einfacher Fallback

Wenn die Funktion nicht unterstützt wird, bleiben die Anzeigen unsichtbar. Da es sich hierbei um Hinweise handelt, die für die Funktionalität nicht entscheidend sind, ist es akzeptabel, sie in nicht unterstützten Browsern wegzulassen.

Erweiterter Fallback (Intersection Observer)

Wenn die Hinweise erforderlich sind, verwenden Sie einen IntersectionObserver, um Klassen umzuschalten, wenn sich Sentinel-Elemente oben und unten im Scroller in den Scrollport hinein- und herausbewegen.

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