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:
- auto: impostazione predefinita. Gli scorrimenti che hanno origine dall'elemento possono propagarsi elementi predecessore.
- 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'elementohtml
impedisce l'overscroll azioni di navigazione. - 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
.