Comment combattre le parchemin

«Faites défiler vers l'avenir», mauvais Martiens - https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations

Tout d'abord - POURQUOI faut-il combattre le parchemin?

En bref, car vous devez parfois bloquer toutes les interactions avec la page. La page devrait être complètement irresponsable. C'est la règle. Règle simple.

  • Vous ne pourrez pas cliquer dessus. Ne pas être en mesure de cliquer.
  • Déplacez le focus ou appuyez sur les touches. Ne pas pouvoir appuyer sur.
  • Faites-le défiler. Ne pas pouvoir faire défiler.

Ok alors - QUAND ça devrait être irresponsable?

Quand vous devriez vous concentrer non pas sur la page, mais seulement sur une partie de celle-ci.

Par exemple, Modals - de petites (ou grandes) cases flottant au milieu de l'écran. Le reste de la page pourrait même être estompé, cos…

le modal est la seule entité avec laquelle vous devriez travailler.
Modal bloquera tout, c'est https://atlaskit.atlassian.com/packages/core/modal-dialog

Je suis un peu surpris que cet article dans MDN Modal Dialog Dialog souligne le besoin de gestion de la mise au point et d'attributs aria appropriés, sans bloquer le défilement.

Et pas de blocage du texte à la parole via inerte ou aria-hidden, actuellement uniquement implémenté dans reach-ui et smooth-ui

Ce n’est peut-être pas très clair pourquoi le modal devrait bloquer le défilement de page. Scroll semble être ok, tant que vous le verrez.

Pendant que vous comprenez ce que vous faites défiler la page. Et pendant que c'est ce que tu voulais faire.

Ainsi, un autre bon exemple, pour expliquer pourquoi le défilement doit être bloqué, est Fullscreen Modal Dialog ou «FocusedTask». Quelque chose qui va consommer toute votre attention.

En fait, c’est un mauvais exemple (https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp)

Une fois ouvert, il utilisera tout l'écran, vous ne pourrez plus voir ni interagir avec le contenu de la page principale. Mais vous pourrez le faire défiler.

Besoin de plus? Ok - composant "onboarding", qui vous guide dans la réflexion de la page.

AtlasKit «l’intégration» est génial - https://atlaskit.atlassian.com/packages/core/onboarding

Imaginons que vous puissiez faire défiler la page. Et vous allez faire défiler la page. Et «spots» seront défilés. Et votre client sera perdu dans l'application partiellement handicapée ……

Comment bloquer un parchemin?

Oh! C’est super facile - style = "overflow: hidden" sur le corps.

débordement: hidden enlèvera les barres de défilement (elles sont cachées) et bloquera le défilement tant que ce mode de débordement ne peut pas défiler. Voici comment fonctionne CSS.

Terminé. Vous pourriez rentrer à la maison.

Mais… Safari

Oui, cela ne fonctionne pas sur Mobile Safari.

Surprise!

  • Safari ignore le débordement sur le corps, ce qui vous permet de le faire défiler au toucher. Et c’est quelque chose que vous ne pouvez toucher que sur le vrai iPhone, pas sur l’émulation Chrome.
  • Cela fonctionnera comme une merde, en particulier pour les formulaires, car le «toucher-défiler» est une longue action «glisser-déposer» pour certaines balises, et vous ne pourrez pas faire défiler vous-même.

La solution au deuxième problème est simple: il suffit de changer le comportement du défilement:

> Cela peut être quelque chose que vous voulez activer par défaut!

Et le correctif pour le premier problème est aussi… simple… - event.preventDefault.

Le seul problème - quel élément à écouter et quel événement à empêcher. Tous les événements à l'intérieur du modal doivent aller à la vie, tous les événements à l'extérieur doivent être bloqués, et tous ces événements peuvent passer des éléments «ok-ish» au non-ok-ish.

Donc, pour chaque événement pouvant provoquer un défilement, vous devez calculer quelque chose, appelons-le défilement et bloquer un événement susceptible de faire défiler un élément que vous ne souhaitez pas faire défiler.

Je dirais - utilisez des bibliothèques externes pour gérer cela.

Conclusion

Donc, utilisez le débordement: caché dans le corps pour supprimer le parchemin sur les navigateurs Google Desktop et Android, et empêcher les événements d'atténuer Safari.

Facile?

En fait non, nous avons raté un point. Barres de défilement!

Tuez la barre de défilement!

Le défilement est désactivé uniquement lorsque les barres de défilement sont désactivées.

Question - vous aviez la barre de défilement, et maintenant vous l'avez supprimée. C'est laissé?

Les barres de défilement ont disparu! Complètement!
Je n'ai pas de machine à fenêtre, désolé

En conséquence, votre page est maintenant 17 pixels plus large et tout votre contenu a «sauté». C’est un parasite et un effet de gigue assez désagréable que nous ne tolérerons pas.

Il est facile de l'atténuer - détectez la largeur de la barre de défilement, définie comme un rembourrage au corps.

Et dernier élément «bonus» - gérer correctement la largeur du corps: les éléments normaux doivent avoir le «droit», comme avant, c'est-à-dire avec «gap», tandis que le «droit» pour les éléments à l'intérieur du verrou doit être placé à droite de la fenêtre.

Combler le «trou» avec paddingRight.

Avis - les éléments en position absolue collent au bord de la fenêtre. Cela pourrait être quelque chose que vous voulez - afficher l'élément d'un bord à l'autre. Mais vous savez, le contenu de ces éléments va «bouger» et ce n’est probablement pas ce que vous voulez vraiment.

Remplir le «trou» avec marginRight.

Avis - le premier (rouge) et le troisième (sans nom) élément ne changent pas de position, alors que le deuxième (position: fixe) colle toujours au bord. C’est réparable - tant que nous «réparons» le corps, nous pourrions réparer tout autre élément.

Vous avez probablement besoin de ce comportement.
Fait amusant - la majorité des bibliothèques utilisent des rembourrages. Des idées pourquoi?

Aujourd’hui, il n’existe qu’une seule bibliothèque (et désolée - elle est basée sur React, n’hésitez pas à la modifier et l’adaptez à votre pile), ce qui se passe bien:

Une autre conclusion

Étape pour empêcher le défilement sur l'élément :

  • Ajouter débordement: élément caché dans le corps.
  • Gérer les événements tactiles, pour Safari.
  • Gardez la barre de défilement.

Point bonus en plus: permet aux verrouillages plein écran de fonctionner sans "écart".

Et, permettez-moi d'être honnête, ce n'est pas aussi facile que 1–2–3. Détails, le diable est dans les détails. S'il vous plaît utiliser des bibliothèques tierces - ils vont vous aider. Beaucoup! Comme d'habitude.

Lis

En savoir plus sur les problèmes de défilement et de défilement. C'est le meilleur article de tous les temps.

En savoir plus sur l'annulation d'événement de défilement / molette / tactile

Et n’oubliez pas la «gestion appropriée de la mise au point», j’ai mentionné dans le début de l’article, mais je n’ai pas bien expliqué:

Utilisation

DOM (Vanilla JS)

Body-scroll-lock: couvrira les 3 étapes. Citation compacte. Permet l'insertion d'un élément interne pouvant défiler à l'intérieur, ce qui peut entraîner un véritable problème de production un jour. Probablement, je ne le recommanderais pas, mais je suis en train d'écrire cet article à cause d'un article sur cette bibliothèque, alors - merci body-scroll-lock.

Scroll-lock: couvrira les 3 étapes, y compris les conteneurs imbriqués et configurables, pour répondre à tous les besoins. Cette bibliothèque n'a que quelques, mais vaut un million.

Dom-Locky: gère seulement même l'étape "empêchant", mais en le faisant bien. Vous manipuliez la barre de défilement par vous-même et n'avez besoin que de gérer les événements tactiles - utilisez cette bibliothèque.

Réagir

React-scroll-locky: bibliothèque complète pour couvrir 3 étapes. Prend en charge les verrous imbriqués, les composants défilables imbriqués et absolument incassables.

React-remove-scroll: une autre version de scroll-locky, deux fois plus petite et sensible aux portails de réaction (probablement le meilleur choix pour React)

React-scrolllock: bibliothèque complète pour couvrir 3 étapes. Ne prend pas en charge les verrous imbriqués, les composants défilables imbriqués, les portails et l’utilisation de bourrages sur le corps. Mais je dois le mentionner, tant que j’ai créé les siens en réponse à celui-ci.

Supplémentaire

Les barres de défilement sont brisées. C'est un fait. C’est pourquoi nous devons les cacher, tout en les désactivant. Tous les navigateurs ne vous permettent pas de les contrôler. Tous les navigateurs n'en ont même pas. Prenez votre destin entre vos mains -