Behalte die Kontrolle über das Scrollen – mit der Option „Zum Aktualisieren ziehen“ und „Überlauf“ kannst du die Effekte anpassen

Kurzfassung

Mit der CSS-Property overscroll-behavior können Entwickler das standardmäßige Scrollverhalten des Browsers überschreiben, wenn das Ende des Inhalts erreicht wird. Anwendungsfälle sind beispielsweise das Deaktivieren der Funktion „Zum Aktualisieren wischen“ auf Mobilgeräten, das Entfernen von Überscroll-Glühen und Gummibandeffekten sowie das Verhindern des Scrollens von Seiteninhalten, wenn sie sich unter einem Modal- oder Overlay befinden.

Hintergrund

Scrollgrenzen und Scrollverknüpfung

Das Scrollen ist eine der grundlegendsten Möglichkeiten, mit einer Seite zu interagieren. Bestimmte UX-Muster können jedoch aufgrund des eigenwilligen Standardverhaltens des Browsers schwierig zu handhaben sein. Ein Beispiel wäre ein App-Bereich mit einer großen Anzahl von Elementen, durch die der Nutzer scrollen muss. Wenn sie das Ende erreicht haben, wird das Scrollen im Überlaufcontainer beendet, da keine weiteren Inhalte mehr angezeigt werden. Mit anderen Worten: Der Nutzer erreicht eine „Scrollgrenze“. Sehen Sie sich aber an, was passiert, wenn der Nutzer weiter scrollt. Die Inhalte hinter der Leiste werden gescrollt. Das Scrollen wird vom übergeordneten Container übernommen, im Beispiel also von der Hauptseite selbst.

Dieses Verhalten wird als Scroll-Kettenreaktion bezeichnet und ist das Standardverhalten des Browsers beim Scrollen von Inhalten. Oft ist die Standardeinstellung ziemlich gut, aber manchmal ist sie nicht wünschenswert oder sogar unerwartet. Bei bestimmten Apps kann es sinnvoll sein, das Nutzererlebnis zu ändern, wenn der Nutzer eine Scrollgrenze erreicht.

Der Effekt des Wischens zum Aktualisieren

„Zum Aktualisieren wischen“ ist eine intuitive Geste, die durch mobile Apps wie Facebook und Twitter populär wurde. Wenn Sie in einem Social-Media-Feed nach unten wischen und loslassen, wird neuer Platz geschaffen, damit neuere Beiträge geladen werden können. Diese Art der UX ist so beliebt geworden, dass mobile Browser wie Chrome auf Android denselben Effekt übernommen haben. Wenn Sie oben auf der Seite wischen, wird die gesamte Seite aktualisiert:

In Fällen wie der PWA kann es sinnvoll sein, die native Aktion zum Aktualisieren durch Ziehen zu deaktivieren. Warum? In dieser App möchten Sie wahrscheinlich nicht, dass der Nutzer die Seite versehentlich aktualisiert. Es kann auch sein, dass eine doppelte Aktualisierungsanimation angezeigt wird. Alternativ kann die Browseraktion angepasst werden, um sie besser an das Branding der Website anzupassen. Leider ist diese Art der Anpassung schwierig umzusetzen. Entwickler schreiben unnötiges JavaScript, fügen nicht passive Touch-Listener hinzu (die das Scrollen blockieren) oder stecken die gesamte Seite in ein 100vw/vh-<div> (um ein Überlaufen der Seite zu verhindern). Diese Problemumgehungen haben gut dokumentierte negative Auswirkungen auf die Scrollleistung.

Das können wir besser!

Jetzt neu: overscroll-behavior

Die overscroll-behavior-Eigenschaft ist eine neue CSS-Funktion, mit der das Verhalten beim Überscrollen eines Containers (einschließlich der Seite selbst) gesteuert wird. Sie können damit unter anderem die Scroll-Kettenfunktion aufheben, die Aktion „Zum Aktualisieren ziehen“ deaktivieren/anpassen und Gummibandeffekte auf iOS-Geräten deaktivieren (wenn Safari overscroll-behavior implementiert). Das Beste daran ist, dass die Verwendung von overscroll-behavior die Seitenleistung nicht beeinträchtigt, wie es bei den in der Einleitung erwähnten Hacks der Fall ist.

Das Attribut kann drei Werte annehmen:

1. auto: Standardeinstellung. Scrollen, das am Element beginnt, kann auf übergeordnete Elemente übertragen werden.
2. contain: Verhindert das Verketten von Scrollvorgängen. Scrollen wird nicht auf übergeordnete Elemente übertragen, aber lokale Effekte innerhalb des Knotens werden angezeigt. Dazu gehören beispielsweise der Overscroll-Glüheffekt unter Android oder der Gummibandeffekt unter iOS, der Nutzer darüber informiert, dass sie eine Scrollgrenze erreicht haben. Hinweis: Wenn Sie overscroll-behavior: contain für das Element html verwenden, werden Navigationsaktionen durch Überscrollen verhindert.
3. none: Entspricht contain, verhindert aber auch Überscroll-Effekte innerhalb des Knotens selbst (z.B. Android-Überscroll-Glühen oder iOS-Rubber-Banding).

Sehen wir uns einige Beispiele an, um zu sehen, wie overscroll-behavior verwendet wird.

Verhindern, dass ein Element mit fester Position beim Scrollen verlassen wird

Das Chatfeld-Szenario

Stellen Sie sich ein fix positioniertes Chatfeld vor, das sich unten auf der Seite befindet. Das Chatfenster soll eine eigenständige Komponente sein, die unabhängig vom Inhalt dahinter gescrollt werden kann. Aufgrund der Scroll-Kette beginnt das Dokument jedoch zu scrollen, sobald der Nutzer die letzte Nachricht im Chatverlauf erreicht.

Bei dieser App ist es sinnvoller, wenn das Scrollen innerhalb des Chatfelds bleibt. Dazu fügen wir dem Element, das die Chatnachrichten enthält, overscroll-behavior: contain hinzu:

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

Im Grunde schaffen wir eine logische Trennung zwischen dem Scrollkontext des Chatfelds und der Hauptseite. Das Endergebnis ist, dass die Hauptseite an Ort und Stelle bleibt, wenn der Nutzer den Anfang oder das Ende des Chatverlaufs erreicht. Scrollbewegungen, die im Chatfeld beginnen, werden nicht weitergegeben.

Das Szenario für Seiten-Overlays

Eine weitere Variante des „Underscroll“-Szenarios ist, wenn Inhalte hinter einem Overlay mit fester Position scrollen. Du erhältst ein tolles Geschenkoverscroll-behavior! Der Browser möchte zwar hilfreich sein, aber am Ende sieht die Website dadurch fehlerhaft aus.

Beispiel: Modales Fenster mit und ohne overscroll-behavior: contain:

„Zum Aktualisieren nach unten ziehen“ deaktivieren

Die Aktion „Zum Aktualisieren wischen“ lässt sich mit einer einzigen CSS-Zeile deaktivieren. Verhindern Sie einfach die Scroll-Kette für das gesamte Element, das den Viewport definiert. In den meisten Fällen ist das <html> oder <body>:

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

Mit dieser einfachen Ergänzung können wir die doppelten Pull-to-Refresh-Animationen in der Chatbox-Demo korrigieren und stattdessen einen benutzerdefinierten Effekt mit einer ansprechenderen Ladeanimation implementieren. Der gesamte Posteingang wird beim Aktualisieren ebenfalls unkenntlich gemacht:

Hier ist ein Ausschnitt aus dem vollständigen Code:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

Glühen und Gummibandeffekt beim Überscrollen deaktivieren

Wenn Sie den Sprungeffekt beim Erreichen eines Scrollbereichs deaktivieren möchten, verwenden Sie overscroll-behavior-y: none:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}

Vollständige Demo

In der vollständigen Chatbox-Demo wird overscroll-behavior verwendet, um eine benutzerdefinierte Animation zum Aktualisieren durch Ziehen zu erstellen und zu verhindern, dass beim Scrollen das Chatbox-Widget verlassen wird. Das sorgt für eine optimale Nutzererfahrung, die ohne CSSoverscroll-behavior schwierig zu erreichen gewesen wäre.