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

Kurzfassung

Mit der Eigenschaft CSS overscroll-behavior können Entwickler die Standard-Scrollverhalten des Browsers beim Erreichen des oberen oder unteren Inhalte. Anwendungsfälle umfassen das Deaktivieren der Funktion zum Aktualisieren zum Entfernen des Overscroll-Effekts und der und verhindern, dass der Seiteninhalt scrollt, wenn er sich unter einem modalen/Overlay befindet.

Hintergrund

Scrollgrenzen und Scroll-Verkettung

<ph type="x-smartling-placeholder">

</ph>

Scrollen ist eine der grundlegendsten Möglichkeiten, mit einer Seite zu interagieren. können bestimmte UX-Muster schwer zu handhaben sein, da der Browser Standardverhalten. Nehmen wir als Beispiel eine App-Leiste mit einer großen Anzahl von Elemente, durch die die Nutzenden scrollen müssen. Ganz unten sehen Sie, Der Überlaufcontainer stoppt das Scrollen, da kein weiterer Inhalt vorhanden ist. Mit anderen Worten: Die Nutzenden eine Scroll-Grenze erreicht. Beachten Sie jedoch, was passiert, wenn die Nutzenden Scrollen. Der Inhalt hinter der Leiste beginnt zu scrollen. Scrollen ist vom übergeordneten Container übernommen wird. die Hauptseite selbst.

Dieses Verhalten wird als Scrollverkettung bezeichnet. Standardeinstellung des Browsers beim Scrollen von Inhalten. Oft ist die Standardeinstellung schön, manchmal unerwünscht oder sogar unerwartet. Bestimmte Apps eine andere User Experience bieten, wenn der Nutzer eine Scroll-Grenze erreicht.

Der Effekt „Zum Aktualisieren ziehen“

„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:

Für Situationen wie die PWA von Twitter: ist es sinnvoll, die native Aktion zum Aktualisieren nach unten zu deaktivieren. Warum? In dieser App möchten Sie wahrscheinlich nicht, dass der Nutzer versehentlich die Seite aktualisiert. Es gibt und die Möglichkeit, eine doppelte Aktualisierungsanimation zu sehen! Alternativ kann es die Aktionen des Browsers besser an die Funktion der Website Branding. Leider wurde diese Art der Anpassung ist das nicht immer einfach. Entwickler schreiben unnötiges JavaScript, fügen nicht passiv Touch-Listener (die das Scrollen blockieren) oder die gesamte Seite in einer <div>, damit die Seite nicht überläuft. Diese Behelfslösungen gut dokumentierte negative auf die Scrollleistung.

Das können wir besser!

Jetzt neu: overscroll-behavior

Die Eigenschaft overscroll-behavior ist eine neue CSS-Funktion, die steuert, was passiert, wenn Sie über einen Container scrollen (einschließlich der Seite selbst). Sie können damit die Scroll-Verkettung abbrechen, Zum Aktualisieren ziehen, unter iOS die Gummibandeffekten deaktivieren (wenn Safari implementiert overscroll-behavior) und mehr. Das Beste daran ist, dass die Verwendung von overscroll-behavior sich nicht negativ auf

Für das Attribut sind drei mögliche Werte möglich:

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 Overscroll-Effekte innerhalb Knoten selbst (z. B. Android-Overscroll-Leuchten oder iOS-Gummibanding)

Sehen wir uns ein paar Beispiele für die Verwendung von overscroll-behavior an.

Verhindern, dass Scrollvorgänge in einem Element mit fester Position umgangen werden

Das Chatbox-Szenario

<ph type="x-smartling-placeholder">

</ph>

Nehmen wir ein fest positioniertes Chatfeld unten auf der Seite. Die ist, dass das Chatfeld eine eigenständige Komponente ist und scrollt. getrennt vom Content dahinter. Aufgrund der Scroll-Verkettung kann der Das Dokument wird gescrollt, sobald der Nutzer auf die letzte Nachricht im Chat stößt. .

Für diese App ist es sinnvoller, Scrolls zu verwenden, die aus dem bleibt im Chat. Um dies zu erreichen, fügen wir overscroll-behavior: contain für das Element, das die Chatnachrichten enthält:

#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 Seiten-Overlay-Szenario

Eine weitere Variante des sogenannten wenn Sie Inhalte sehen, Scrollen hinter einem Overlay mit fester Position. Das Werbegeschenk ist tot overscroll-behavior ist in Ordnung! Der Browser ist zwar hilfreich, führt dies dazu, dass die Website fehlerhaft wirkt.

Beispiel – modales Fenster mit und ohne overscroll-behavior: contain:

"Zum Aktualisieren ziehen" deaktivieren

Zum Deaktivieren der Aktion „Zum Aktualisieren ziehen“ wird eine einzelne CSS-Zeile benötigt. Nur verhindern Scroll-Verkettung für das gesamte Element, das den Darstellungsbereich definiert. In den meisten Fällen <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. Die bei einer Aktualisierung des Posteingangs wird auch der gesamte Posteingang 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

Wenn wir alles zusammenfügen, Chatbox-Demo verwendet overscroll-behavior, um eine benutzerdefinierte Animation zum Aktualisieren durch Ziehen zu erstellen und verhindern, dass durch Scrollen das Escape-Format für das Chatbox-Widget angezeigt wird. Dies sorgt für eine optimale Nutzererfahrung, die ohne CSS nur schwer zu erreichen wäre overscroll-behavior

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">