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. Il peut s'agir, par exemple, de désactiver la fonctionnalité sur mobile, suppression des effets de halo de défilement hors limites et d'élastique, et d'empêcher le contenu de la page de défiler lorsqu'il est sous une modale/superposition.

Contexte

Limites de défilement et chaînage 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 panneau d'applications avec un grand nombre éléments que l'utilisateur peut avoir à faire défiler. Lorsqu'ils atteignent le minimum, le conteneur "overflow" arrête le défilement, car il n'y a plus de contenu à utiliser. En d’autres termes, l’utilisateur atteint une "limite de défilement". Mais notez ce qui se passe si l'utilisateur continue faire défiler. Le contenu derrière le panneau commence à défiler ! Le défilement est prises 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 offrent une expérience utilisateur différente lorsque l'utilisateur atteint une limite de défilement.

Effet "Tirez pour actualiser"

Pull-to-Refresh est un geste intuitif popularisé par les applications mobiles Facebook et Twitter. En parcourant un fil d'actualité sur les réseaux sociaux, vous créez d’espace pour charger plus de messages récents. En fait, cette UX particulière a deviennent si populaires que les navigateurs mobiles comme Chrome sur Android ont adopté le même effet. En balayant le haut de la page vers le bas, toute la page est actualisée:

Pour des situations telles que la PWA Twitter, il peut être judicieux de désactiver l'action native pull-to-refresh. Pourquoi ? Dans ce vous ne voulez probablement pas que l'utilisateur actualise accidentellement la page. Il y a et la possibilité d'afficher 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 la page entière à 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 de ce qui se passe lorsque vous faites défiler trop un conteneur (y compris le page actuelle). 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. Mieux encore, l'utilisation de overscroll-behavior n'a pas d'incidence les performances de la page comme celles mentionnées dans l'introduction.

La propriété a trois valeurs possibles:

1. auto : valeur par défaut. Les défilements provenant de cet élément peuvent se propager sur é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 représenté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 le défilement excessif les actions de navigation.
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. La que la fenêtre de chat est un composant autonome séparément du contenu associé. 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;
}

Nous créons essentiellement une séparation logique entre le défilement de la fenêtre le contexte 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 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 – modale avec et sans overscroll-behavior: contain:

Désactiver l'action Pull pour actualiser

La désactivation de l'action Pull-to-Refresh se limite à une seule ligne de code CSS. Évitez simplement de défilement enchaîné sur l'ensemble de 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 d'éclat et d'élasticité 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

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

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

.