Scroll Bouncing sur vos sites Web

Cet article décrit les effets du rebond de défilement et son fonctionnement sur différents navigateurs Web. Il contient des critiques de plusieurs solutions proposées sur le Web, qui peuvent être utilisées pour empêcher le rebond du défilement. La propriété CSS, overscroll-behavior implémentée dans Chrome en décembre 2017 et dans Firefox en mars 2018, est également décrite dans cet article. Une bonne compréhension de cet effet est très utile pour créer ou concevoir un site Web comportant des éléments fixes.

Le rebond de défilement (parfois appelé défilement de «bandage élastique» ou «défilement élastique») est souvent utilisé pour faire référence à l’effet que vous voyez lorsque vous faites défiler tout en haut d’une page ou d’un élément HTML, ou le bas d'une page ou d'un élément, sur un appareil utilisant un écran tactile ou un pavé tactile, et un espace vide peut être vu pendant un instant avant que l'élément ou la page ne ressorte et s'aligne sur son dessus / bas (lorsque vous relâchez / des doigts). Vous pouvez voir un effet similaire se produire dans l'alignement par défilement CSS entre les éléments.

Cependant, cet article se concentre sur le rebondissement lorsque vous faites défiler tout en haut ou en bas d'une page Web. En d'autres termes, lorsque le défilement de a atteint sa limite de défilement .

Une bonne compréhension du rebond de défilement est très utile car elle vous aidera à décider de la manière dont vous construisez vos sites Web et comment vous souhaitez faire défiler la page.

Je veux voir fixe éléments sur un déplacement de page. Voici quelques exemples: lorsque vous souhaitez qu'un en-tête ou un pied de page soit fixé dans une certaine position ou que vous souhaitiez qu'un autre élément, tel qu'un menu, soit fixé ou que vous souhaitiez faire défiler la page à certaines positions vous ne voulez pas que le défilement supplémentaire se produise tout en haut ou en bas de la page, ce qui risque d’embrouiller les visiteurs de votre site Web. Cet article proposera des solutions aux problèmes rencontrés lors du rebondissement de défilement tout en haut ou en bas d'une page Web.

Ma première rencontre avec l'effet

J'ai remarqué cet effet pour la première fois lorsque je mettais à jour un site Web construit il y a longtemps. Vous pouvez consulter le site Web ici . Le pied de page en bas de la page était censé être positionné au bas de la page et ne pas bouger du tout. En même temps, vous deviez pouvoir faire défiler le contenu principal de la page. Idéalement, cela fonctionnerait comme ceci:

Il fonctionne actuellement de cette façon dans Firefox ou sur tout navigateur sur un périphérique sans écran tactile ni pavé tactile. Cependant, à cette époque, j'utilisais Chrome sur un MacBook. Je défilais au bas de la page en utilisant un trackpad lorsque j'ai découvert que mon site Web ne fonctionnait pas correctement. Vous pouvez voir ce qui s'est passé ici:

Oh non! Ce n'était pas ce qui devait arriver! J'avais fixé la position du pied de page au bas de la page en définissant sa propriété CSS position comme ayant une valeur de fixée . C'est aussi le bon moment pour revoir ce que position: fixe; l'est. Selon la spécification CSS 2.1, lorsqu'une "boîte" (dans ce cas, le pied de page bleu foncé) est corrigée, elle est "corrigée par rapport à la fenêtre d'affichage et ne bouge pas lorsqu'elle est défilée". pas censé bouger lorsque vous faites défiler la page. C'est ce qui m'a inquiété quand j'ai vu ce qui se passait sur Chrome.

Pour rendre cet article plus complet, je vous montrerai comment la page défile sur Mobile Edge, Mobile Safari et Desktop Safari ci-dessous. Ceci est différent de ce qui se passe dans le défilement sur Firefox et Chrome. J'espère que cela vous permettra de mieux comprendre comment le même code fonctionne actuellement de différentes manières. Il est actuellement difficile de développer un défilement qui fonctionne de la même manière sur différents navigateurs Web.

A la recherche d'une solution

Une de mes premières pensées était qu'il y aurait un moyen simple et rapide de résoudre ce problème sur tous les navigateurs. Ce que cela signifie, c'est que je pensais pouvoir trouver une solution qui prendrait quelques lignes de code CSS et qu'aucun JavaScript ne serait impliqué. Par conséquent, l'une des premières choses que j'ai faites, c'était d'essayer d'y parvenir. Les navigateurs utilisés pour les tests étaient Chrome, Firefox et Safari sur MacOS et Windows 10, et Edge et Safari sur iOS. Les versions de ces navigateurs étaient les plus récentes au moment de la rédaction de cet article (2018).

Solutions HTML et CSS uniquement

Positionnement absolu et relatif

positionnement relatif pour positionner le pied de page car j'étais habitué à construire des pieds de page comme celui-ci. L'idée serait de définir ma page Web à 100% de hauteur pour que le pied de page soit toujours au bas de la page avec une hauteur fixe, tandis que le contenu occupe 100% moins la hauteur du pied de page. Vous pouvez également définir un fond de remplissage au lieu d'utiliser calc et définir la hauteur de body-container à 100% pour que le contenu de l'application ne chevaucher avec le pied de page. Le code CSS ressemblait à ceci:

 html {
  largeur: 100%;
  hauteur: 100%;
  débordement caché;
  position: relative;
}

corps {
  largeur: 100%;
  marge: 0;
  font-family: sans-serif;
  hauteur: 100%;
  débordement caché;
}

.body-container {
  hauteur: calc (100% - 100px);
  débordement: auto;
}

.color-picker-main-container {
  largeur: 100%;
  taille de la police: 22px;
  fond de remplissage: 10px;
}

bas de page {
  position: absolue;
  en bas: 0;
  hauteur: 100px;
  largeur: 100%;
}

Cette solution fonctionne presque de la même façon que la solution originale (qui ne concernait que position: fixed; ). Un avantage de cette solution par rapport à cela est que le défilement ne concerne pas la page entière, mais uniquement le contenu de la page sans le pied de page. Le plus gros problème de cette méthode est que sur Safari Mobile, le pied de page et le contenu de l'application se déplacent simultanément. Cela rend cette approche très problématique en défilant rapidement:

Un autre effet que je ne voulais pas était difficile à remarquer au début, et je réalisais seulement que cela se produisait après avoir essayé plus de solutions. Il était légèrement plus lent de faire défiler le contenu de mon application. Étant donné que nous définissons la hauteur de notre conteneur de défilement à 100%, cela empêche le défilement basé sur le flick / momentum sur iOS. Si cette hauteur de 100% est plus courte (par exemple, lorsqu'une hauteur de 100% de 2000px devient une hauteur de 100% de 900px), le défilement basé sur la quantité de mouvement augmente. Le défilement basé sur un mouvement / une impulsion se produit lorsque vous faites glisser votre doigt sur la surface d'un écran tactile et que la page défile d'elle-même. Dans mon cas, je souhaitais que le défilement basé sur le mouvement produise un défilement rapide des utilisateurs. Je suis donc resté à l'écart des solutions qui fixaient une hauteur de 100%.

Autres tentatives

et que j'ai essayé d'utiliser sur mon code, est montré ci-dessous comme exemple.

 html {
  largeur: 100%;
  position: fixe;
  débordement caché;
}

corps {
  largeur: 100%;
  marge: 0;
  font-family: sans-serif;
  position: fixe;
  débordement caché;
}

.body-container {
  largeur: 100vw;
  hauteur: calc (100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touchez;
}

.color-picker-main-container {
  largeur: 100%;
  taille de la police: 22px;
  fond de remplissage: 10px;
}

bas de page {
  position: fixe;
  en bas: 0;
  hauteur: 100px;
  largeur: 100%;
}

Ce code fonctionne sur Chrome et Firefox sur MacOS de la même manière que la solution précédente. Un avantage de cette méthode est que le défilement n'est pas limité à une hauteur de 100%, de sorte que le défilement basé sur la quantité de mouvement fonctionne correctement. Sur Safari, cependant, le pied de page disparaît:

Sur iOS Safari, le pied de page devient plus court et il existe un espace extra transparent (ou blanc) en bas. De plus, la possibilité de faire défiler la page est perdue lorsque vous faites défiler tout en bas. Vous pouvez voir le blanc en dessous du pied de page ici:

Une ligne de code intéressante est: -webkit-overflow -crossing: touch; . L'idée sous-jacente est qu'elle permet le défilement basé sur le moment pour un élément donné. Cette propriété est décrite comme "non standard" et comme "non sur une piste standard" dans la documentation MDN. Il apparaît sous la forme d'une "valeur de propriété invalide" sous inspection dans Firefox et Chrome, et n'apparaît pas comme une propriété sur Desktop Safari. Je n'ai pas utilisé cette propriété CSS à la fin.

Pour montrer un autre exemple de solution que vous pouvez rencontrer et un résultat différent que j'ai trouvé, j'ai également essayé le code ci-dessous :

 html {
  position: fixe;
  hauteur: 100%;
  débordement caché;
}

corps {
  font-family: sans-serif;
  marge: 0;
  largeur: 100vw;
  hauteur: 100vh;
  overflow-y: auto;
  débordement-x: caché;
  -webkit-overflow-scrolling: touchez;
}

.color-picker-main-container {
  largeur: 100%;
  taille de la police: 22px;
  fond rembourré: 110px;
}

bas de page {
  position: fixe;
}

Cela fonctionne bien sur les différents navigateurs de bureau, le défilement basé sur le momentum fonctionne toujours et le pied de page est fixé en bas et ne bouge pas sur les navigateurs Web de bureau. La partie la plus problématique de cette solution (et ce qui la rend unique) est que, sur iOS Safari, le pied de page tremble et déforme très légèrement et vous pouvez voir le contenu en dessous lorsque vous défilez.

Solutions Avec JavaScript

Après avoir essayé quelques solutions initiales en utilisant uniquement HTML et CSS, j'ai essayé quelques solutions JavaScript. J'aimerais ajouter que c'est quelque chose que je ne vous recommande pas de faire et qu'il serait préférable d'éviter. D'après mon expérience, il existe généralement des solutions plus élégantes et concises utilisant uniquement le HTML et le CSS. Cependant, j'avais déjà passé beaucoup de temps à essayer les autres solutions, je pensais que cela ne ferait pas de mal de voir rapidement s'il y avait des solutions alternatives utilisant JavaScript.

Touch Events

Une approche de résoudre le problème du rebond de rebondissement est en empêchant les événements tactiles touchmove ou sur le document window ou . L'idée sous-jacente est que les événements tactiles sur la fenêtre globale sont empêchés, tandis que les événements tactiles sur le contenu que vous souhaitez faire défiler sont autorisés. Un exemple de code comme celui-ci est présenté ci-dessous:

 // Empêche la fenêtre de passer au toucher sur les anciens navigateurs.
window.addEventListener ('touchmove', fonction (event) {
  event.preventDefault ()
}, faux)

// Permet au contenu de se déplacer au toucher.
document.querySelector ('. body-container'). addEventListener ('touchmove', function (event) {
  event.stopPropagation ()
}, faux)

J'ai essayé de nombreuses variantes de ce code pour essayer de faire fonctionner correctement le défilement. La prévention de touchmove sur la fenêtre ne faisait aucune différence. En utilisant le document n'a fait aucune différence. J'ai également essayé d'utiliser à la fois touchstart et touchmove pour contrôler le défilement, mais ces deux méthodes n'ont pas fait de différence. J'ai appris que vous ne pouvez plus appeler event.preventDefault () pour des raisons de . Vous devez définir l'option passive sur false dans le programme d'écoute d'événement:

 // Empêche la fenêtre d'activer les nouveaux navigateurs.
window.addEventListener ('touchmove', fonction (event) {
  event.preventDefault ()
}, {passive: false})

Bibliothèques

Vous pouvez trouver une bibliothèque appelée "iNoBounce" qui a été créée pour "empêcher votre application Web iOS de se déplacer lors du défilement". Une chose à noter lorsque vous utilisez cette bibliothèque pour résoudre le problème décrit dans cet article est qu'il vous faut utiliser -webkit-overflow-scrolling . Une autre chose à noter est que la solution plus concise avec laquelle je me suis retrouvé (décrite plus loin) fait la même chose que sur iOS. Vous pouvez le tester vous-même en regardant les exemples de son référentiel GitHub et en le comparant à la solution avec laquelle je me suis retrouvé.

Overscroll Behavior

Après avoir essayé toutes ces solutions, j'ai trouvé sur la propriété CSS overscroll-behavior . La propriété CSS overscroll-behavior a été implémentée dans Chrome 63 le décembre 2017 et dans Firefox 59 le mars 2018 . Cette propriété telle que décrite dans la documentation MDN, "vous permet de contrôler le comportement de débordement de défilement du navigateur – ce qui se produit lorsque la limite d'une zone de défilement est atteinte." 19659005] Il ne me restait plus qu'à comportement de dérapage à aucun dans le corps de mon site et je pourrais quitter le poste ] comme fixé . Même si le défilement basé sur l’impulsion appliqué à la totalité de la page, plutôt que le contenu sans le pied de page, cette solution était suffisante pour moi et remplissait toutes mes exigences à ce moment-là. Il est peut-être utile de noter que Edge a cette propriété marquée comme sous développement maintenant. Le comportement de dérapage peut être considéré comme une amélioration si les navigateurs ne le prennent pas encore en charge.

Conclusion

Si vous ne souhaitez pas que vos en-têtes ou pieds de page fixes peut maintenant utiliser la propriété CSS overscroll-behavior .

Malgré le fait que cette solution fonctionne différemment dans différents navigateurs (le rebond du contenu de la page se produit toujours sur Safari et Edge, alors que sur Firefox et Chrome 't), il gardera l'en-tête ou le pied de page fixe lorsque vous faites défiler tout en haut ou en bas d'un site Web. C'est une solution concise et sur tous les navigateurs testés, le défilement basé sur le momentum fonctionne toujours, de sorte que vous pouvez faire défiler beaucoup de contenu de page très rapidement. Si vous créez un en-tête ou un pied de page fixe sur votre page Web, vous pouvez commencer à utiliser cette solution.

(rb, ra, yk, il)