Prenez le contrôle de votre défilement en personnalisant les effets d'actualisation et de dépassement.

TL;DR

La propriété CSS overscroll-behavior permet aux développeurs d'ignorer comportement de défilement par défaut du navigateur lorsque l'utilisateur atteint le haut/bas de contenus. Les cas d'utilisation incluent la désactivation de la fonctionnalité de rafraîchissement par glissement sur mobile, la suppression des effets de lueur et de rebondissement lors du défilement, et l'empêchement du défilement du contenu de la page lorsqu'il se trouve sous un modal/une superposition.

Contexte

Limites de défilement et enchaînement de défilement

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

</ph>

Le défilement est l’un des moyens les plus fondamentaux d’interagir avec une page, mais certains modèles d'expérience utilisateur peuvent être difficiles à gérer en raison de l'originalité comportements par défaut. Prenons l'exemple d'un tiroir d'applications contenant un grand nombre d'éléments que l'utilisateur peut être amené à faire défiler. Lorsqu'il arrive en bas, le conteneur de débordement cesse de défiler, car il n'y a plus de contenu à consommer. En d’autres termes, l’utilisateur atteint une "limite de défilement". Notez ce qui se passe si l'utilisateur continue de faire défiler l'écran. Le contenu derrière le panneau commence à faire défiler. Le défilement est géré par le conteneur parent, la page principale elle-même dans l'exemple.

Il s'avère que ce comportement est appelé chaînage de défilement. par défaut du navigateur lors du défilement du contenu. La valeur par défaut est souvent intéressante, parfois, ce n'est pas souhaitable ni même inattendu. Certaines applications peuvent souhaiter proposer une expérience utilisateur différente lorsque l'utilisateur atteint une limite de défilement.

Effet "Tirez pour actualiser"

Le geste de balayage pour actualiser est un geste intuitif popularisé par les applications mobiles telles que Facebook et Twitter. Si vous faites glisser un flux de réseau social vers le bas et le relâchez, un nouvel espace est créé pour que les posts plus récents soient chargés. En fait, cette UX particulière a deviennent si populaires que les navigateurs mobiles comme Chrome sur Android ont adopté le même effet. Balayer l'écran vers le bas en haut de la page permet d'actualiser l'ensemble de la page :

Dans des situations comme la PWA Twitter, il peut être judicieux de désactiver l'action native de balayage pour actualiser. Pourquoi ? Dans ce vous ne voulez probablement pas que l'utilisateur actualise accidentellement la page. Il est également possible de voir une animation de double actualisation. Il peut également plus agréable de personnaliser l'action du navigateur, en l'alignant plus étroitement sur votre image de marque. Malheureusement, ce type de personnalisation difficile à obtenir. Les développeurs finissent par écrire du code JavaScript inutile, ajoutez non passif les écouteurs tactiles (qui bloquent le défilement), ou l'intégralité de la page dans un flux 100 vw/vh <div> (pour éviter que la page ne déborde) Ces solutions de contournement à exclure bien documenté sur les performances de défilement.

Nous pouvons faire mieux !

Découvrez overscroll-behavior

La propriété overscroll-behavior est une nouvelle fonctionnalité CSS qui contrôle le comportement qui se produit lorsque vous faites défiler un conteneur (y compris la page elle-même). Vous pouvez l'utiliser pour annuler le chaînage de défilement, désactiver/personnaliser le action pull-to-refresh, désactivez les effets d'élastique sur iOS (lorsque implémente overscroll-behavior), et plus encore. Le meilleur est que l'utilisation de overscroll-behavior n'a pas d'incidence négative sur les performances des pages, contrairement aux hacks mentionnés dans l'introduction.

La propriété peut prendre trois valeurs :

1. auto : valeur par défaut. Les défilements qui proviennent de l'élément peuvent se propager aux éléments ancêtres.
2. contain : empêche les enchaînements de défilement. Les défilements ne se propagent pas aux ancêtres, mais les effets locaux au sein du nœud sont affichés. Par exemple, le défilement hors limites sur Android ou l'effet élastique sur iOS, qui avertit l'utilisateur lorsqu'ils atteignent une limite de défilement. Remarque : L'utilisation de overscroll-behavior: contain sur l'élément html empêche les actions de navigation par défilement excessif.
3. none : identique à contain, mais empêche également les effets de défilement hors limites dans le nœud lui-même (par exemple, un effet de défilement hors limites Android ou l'élasticité élastique iOS) ;

Examinons quelques exemples pour voir comment utiliser overscroll-behavior.

Empêcher les défilements d'échapper un élément de position fixe

Scénario de la fenêtre de chat

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

</ph>

Prenons l'exemple d'une fenêtre de chat positionnée de façon fixe en bas de la page. L'intention est que la boîte de chat soit un composant autonome et qu'elle défile séparément du contenu derrière elle. Toutefois, en raison du chaînage de défilement, le document commence à défiler dès que l'utilisateur clique sur le dernier message du chat. historique.

Pour cette application, il est plus approprié d'avoir des défilements qui commencent dans restent dans le chat. Pour ce faire, nous pouvons ajouter overscroll-behavior: contain à l'élément contenant les messages de chat:

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

En substance, nous créons une séparation logique entre le contexte de défilement de la boîte de chat et la page principale. Au final, la page principale reste en place lorsque l'utilisateur accède au haut/bas de l'historique des discussions. Les défilements qui commencent dans la boîte de chat ne se propagent pas.

Scénario de superposition de page

Une autre variante du « sous-défilement » est l'affichage de contenu le défilement derrière une superposition à position fixe ; Un cadeau mort overscroll-behavior est en ordre ! Le navigateur essaie d'être utile, mais cela finit par faire en sorte que le site présente des bugs.

Exemple : modal avec et sans overscroll-behavior: contain :

Désactiver le tirage pour actualiser

La désactivation de l'action Pull-to-Refresh se limite à une seule ligne de code CSS. Évitez simplement les défilements s'enchaînent sur tout l'élément définissant la fenêtre d'affichage. Dans la plupart des cas, <html> ou <body>:

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

Grâce à cet ajout simple, nous avons corrigé la double animation "Pull-to-Refresh" dans la démonstration de la boîte de dialogue Implémentez plutôt un effet personnalisé qui utilise une animation de chargement plus claire. La toute la boîte de réception est également floutée lorsque la boîte de réception est actualisée:

Voici un aperçu du code complet:

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

Désactiver les effets de lueur et de rebond lors du défilement hors limites

Pour désactiver l'effet de rebond lorsque vous atteignez une limite de défilement, utilisez overscroll-behavior-y: none :

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

Démo complète

En résumé, démo de la boîte de chat utilise overscroll-behavior pour créer une animation personnalisée de type "Pull-to-Refresh" et désactiver l'échappement du widget de la fenêtre de chat par les défilements. Vous bénéficiez ainsi d'une expérience une expérience utilisateur qu'il aurait été difficile d'atteindre sans CSS overscroll-behavior