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 Scroll-Verkettung

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, Nutzende eine Scroll-Grenze erreicht. Sehen Sie sich aber an, was passiert, wenn der Nutzer weiter scrollt. Die Inhalte hinter der Leiste werden gescrollt. Scrollen ist vom übergeordneten Container übernommen wird. die 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 ziehen“ ist eine intuitive Geste, die von mobilen Apps wie dem Facebook und Twitter Durch das Aufrufen eines sozialen Feeds und die Veröffentlichung Platz zum Laden neuerer Beiträge. Diese spezielle UX hat sind so beliebt, dass mobile Browser wie Chrome für Android inzwischen denselben Effekt haben. Wenn Sie oben auf der Seite nach unten wischen, wird die gesamte Seite aktualisiert:

In Fällen wie der PWA von Twitter 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 gesteuert wird, das auftritt, wenn Sie einen Container (einschließlich der Seite selbst) überscrollen. 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 sich nicht negativ auf

Das Attribut kann drei Werte annehmen:

1. auto: Die Standardeinstellung. Scrollvorgänge, die von dem Element stammen, Ancestor-Elemente.
2. contain: Verhindert die Scroll-Verkettung. Scrolls werden nicht an Ancestors weitergegeben aber lokale Effekte innerhalb des Knotens werden angezeigt. Das Overscroll-Leuchtsymbol oder den Gummibanding-Effekt unter iOS, wodurch der Nutzer wenn sie eine Scroll-Grenze erreicht haben. Hinweis: Verwenden Sie overscroll-behavior: contain für das Element html verhindert Overscroll Navigationsaktionen verwenden.
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 ein paar Beispiele für die Verwendung von overscroll-behavior an.

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

Das Chatbox-Szenario

Stellen Sie sich ein fix positioniertes Chatfenster vor, das sich unten auf der Seite befindet. Die ist, dass das Chatfeld eine eigenständige Komponente ist und scrollt. getrennt vom Content dahinter. Aufgrund der Scroll-Kette beginnt das Dokument jedoch zu scrollen, sobald der Nutzer die letzte Nachricht im Chatverlauf erreicht.

Für diese App ist es sinnvoller, Scrolls zu verwenden, die aus dem bleibt im Chat. 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 Wesentlichen schaffen wir eine logische Trennung zwischen dem Scrollen des Chatfelds Kontext und die Hauptseite. Das Endergebnis ist, dass die Hauptseite angezeigt wird, Der Nutzer erreicht den Anfang/das Ende des Chatprotokolls. Scrollvorgänge, die in der Chatbox nicht propagiert.

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 versucht zwar, hilfreich zu sein, aber am Ende sieht die Website fehlerhaft aus.

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

"Zum Aktualisieren 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;
}

Durch diese einfache Ergänzung beheben wir die doppelten Zieh-zum-Aktualisieren-Animationen Chatbox-Demo ansehen und Implementieren Sie stattdessen einen benutzerdefinierten Effekt, der eine übersichtlichere Ladeanimation verwendet. Der gesamte Posteingang wird beim Aktualisieren ebenfalls unkenntlich gemacht:

Hier ist ein Ausschnitt des vollständiger 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>

Overscroll-Leuchten und Gummibanding-Effekte deaktivieren

Um den Sprungeffekt beim Erreichen einer Scroll-Grenze zu deaktivieren, verwende 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.