Elemente, die die Scrollposition berücksichtigen

Webfunktionen: Container-Scrollstatusabfragen

Übersicht

Verbessern Sie die Nutzerfreundlichkeit von schwebenden Schaltflächen, z. B. einem Link „Zurück nach oben“, indem Sie sie nur dann einblenden, wenn sie nützlich sind. In diesem Leitfaden wird beschrieben, wie Sie diese Elemente mit CSS-container-scroll-state-queries erstellen. So können Sie Elemente basierend auf der Scrollposition ihres Containers formatieren, ohne JavaScript-Scroll-Listener oder -Observer zu verwenden.

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

2. Stil des schwebenden Elements festlegen

Platzieren Sie das Element im Container und gestalten Sie es. Standardmäßig sollte es ausgeblendet sein.

.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. Auf den Scrollstatus reagieren

Verwenden Sie die Regel @container mit der Funktion scroll-state. Wenn du prüfen möchtest, ob der Nutzer nach unten gescrollt hat, prüfe, ob der Container nach oben scrollbar ist.

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

Fallback-Strategien

Einfacher Fallback

Wenn container-scroll-state-queries nicht unterstützt wird, bleibt das schwebende Element aufgrund der Standardeinstellung visibility: hidden unsichtbar. Damit das Element auch in nicht unterstützten Browsern funktioniert, können Sie es dort immer sichtbar machen.

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

Erweiterter Fallback (Intersection Observer)

Wenn dynamische Sichtbarkeit erforderlich ist, verwenden Sie einen IntersectionObserver, um eine Klasse umzuschalten, wenn ein Sentinel-Element oben im Scroller nicht mehr sichtbar ist.

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