Assumi il controllo dello scorrimento personalizzando gli effetti pull-to-refresh e overflow

TL;DR

La proprietà CSS overscroll-behavior consente agli sviluppatori di eseguire l'override della comportamento predefinito del browser quando si raggiunge la parte superiore o inferiore del contenuti. I casi d'uso includono la disattivazione del pull-to-refresh funzionalità sui dispositivi mobili, rimuovendo gli effetti di bagliore sull'overscroll e rubberbanding, e impedire lo scorrimento dei contenuti della pagina quando si trovano sotto una finestra modale/overlay.

Sfondo

Limiti e concatenamento degli scorrimenti

Lo scorrimento è uno dei modi più fondamentali per interagire con una pagina, ma alcuni pattern UX possono essere difficili da gestire a causa delle peculiarità i comportamenti predefiniti. Ad esempio, consideriamo un riquadro a scomparsa delle app con un gran numero di gli elementi che l'utente potrebbe dover scorrere. Quando raggiungono il punto più basso, il container overflow interrompe lo scorrimento perché non sono presenti altri contenuti da consumare. In altre parole, l'utente raggiunge il "confine di scorrimento". Ma nota cosa succede se l'utente continua a scorri. I contenuti dietro il riquadro a scomparsa iniziano a scorrere. Lo scorrimento è presi in carico dal contenitore principale; la pagina principale nell'esempio.

Questo comportamento si chiama scroll chain. l'impostazione predefinita del browser durante lo scorrimento dei contenuti. Capita spesso che l'impostazione predefinita sia molto utile, ma a volte non è desiderabile o addirittura inaspettato. Alcune app potrebbero voler offrono un'esperienza utente diversa quando l'utente raggiunge il limite di scorrimento.

Effetto pull-to-refresh

Pull-to-refresh è un gesto intuitivo diffuso da app mobile come Facebook e Twitter. Rilasciando i dati da un feed social, vengono creati nuovi spazio per caricare post più recenti. Infatti, questa particolare UX ha sono diventate talmente popolari che i browser mobile come Chrome su Android hanno adottato lo stesso effetto. Se scorri verso il basso nella parte superiore della pagina, viene aggiornata l'intera pagina:

Per situazioni come la PWA di Twitter, potrebbe essere utile disattivare l'azione nativa "pull-to-refresh". Perché? In questo probabilmente non vorrai che l'utente aggiorni accidentalmente la pagina. C'è e la possibilità di visualizzare un'animazione di doppio aggiornamento. In alternativa, migliorare la personalizzazione dell'azione del browser, allineandola più da vicino alla branding. Peccato che questo tipo di personalizzazione è stata difficile da realizzare. Gli sviluppatori finiscono per scrivere codice JavaScript non necessario, non passivo listener di tocco (che bloccano lo scorrimento) o incolla l'intera pagina in una connessione 100vw/vh <div> (per evitare l'overflow della pagina). Queste soluzioni alternative hanno negativo ben documentato effetti sullo scorrimento.

Possiamo fare di meglio!

Ti presentiamo overscroll-behavior

La proprietà overscroll-behavior è una nuova funzionalità CSS che controlla il comportamento di ciò che accade quando fai lo scorrimento eccessivo di un contenitore (incluso il pagina stessa). Puoi utilizzarla per annullare il concatenamento, disattivare/personalizzare l'azione pull-to-refresh, disattiva gli effetti del rubberbanding su iOS (quando Safari implementa overscroll-behavior) e altro ancora. La parte migliore è che l'uso di overscroll-behavior non influisce negativamente come le prestazioni della pagina, come i trucchi menzionati nell'introduzione.

La proprietà assume tre possibili valori:

1. auto: impostazione predefinita. Gli scorrimenti che hanno origine dall'elemento possono propagarsi elementi predecessore.
2. contain: impedisce il concatenamento dello scorrimento. Gli scorrimenti non si propagano ai predecessori ma gli effetti locali all'interno del nodo. Ad esempio, il bagliore dell'overscroll l'effetto su Android o l'effetto rubberbanding su iOS che avvisa l'utente quando raggiungono il limite di scorrimento. Nota: utilizzando overscroll-behavior: contain sull'elemento html impedisce l'overscroll azioni di navigazione.
3. none: uguale a contain ma impedisce anche gli effetti overscroll all'interno il nodo stesso (ad es. bagliore overscroll per Android o rubberbanding di iOS).

Analizziamo alcuni esempi per capire come utilizzare overscroll-behavior.

Impedisci agli scorrimenti di uscire da un elemento con posizione fissa

Lo scenario del riquadro della chat

Considera l'uso di un riquadro della chat con posizione fissa che si trova in fondo alla pagina. La è che il riquadro della chat sia un componente autonomo da scorrere separatamente dai contenuti sottostanti. Tuttavia, a causa della concatenazione, il documento inizia a scorrere non appena l'utente seleziona l'ultimo messaggio della chat. storia.

Per questa app, è più appropriato avere scorrimenti che hanno origine all'interno a rimanere all'interno della chat. Possiamo farlo aggiungendo overscroll-behavior: contain all'elemento che contiene i messaggi di chat:

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

Essenzialmente, stiamo creando una separazione logica tra lo scorrimento del riquadro della chat contesto e la pagina principale. Il risultato finale è che la pagina principale rimane in posizione l'utente raggiunge la parte superiore o inferiore della cronologia chat. Scorrimenti che iniziano tra la casella della chat non si propaga.

Scenario overlay di pagina

Un'altra variante di "underscroll" si verifica quando vedi dei contenuti scorrere dietro un overlay in posizione fissa. Un omaggio mortale overscroll-behavior è in ordine! Il browser sta cercando di essere utile, finisce per far sì che il sito sembri insidioso.

Esempio - modale con e senza overscroll-behavior: contain:

Disabilitazione del pull-to-refresh

La disattivazione dell'azione pull-to-refresh utilizza una singola riga di CSS. Evita concatenamento dello scorrimento all'intero elemento che definisce l'area visibile. Nella maggior parte dei casi, <html> o <body>:

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

Con questa semplice aggiunta, correggiamo le doppie animazioni di pull-to-refresh in la demo della chatbox implementa invece un effetto personalizzato che utilizza un'animazione di caricamento più ordinata. La l'intera casella di posta viene anche sfocata con l'aggiornamento:

Ecco uno snippet delle codice completo:

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

Disattivazione degli effetti overscroll e rubberbanding

Per disattivare l'effetto rimbalzo quando raggiungi un limite di scorrimento, utilizza overscroll-behavior-y: none:

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

Demo completa

Riassumendo, l'intera usi della chatbox demo overscroll-behavior per creare un'animazione pull-to-refresh personalizzata e disabilitare gli scorrimenti per evitare l'interpretazione letterale al widget della chatbox. Ciò fornisce un'ottimizzazione un'esperienza utente difficile da ottenere senza CSS overscroll-behavior.