Catégories
Astuces et Design

Correction du défilement fluide avec Find-on-Page

À l'époque où nous avons publié la conception v17 (nous sommes maintenant sur la version 18) de ce site. J'ai ajouté html { scroll-behavior: smooth; } au CSS. Tout de suite, j'ai reçu des commentaires comme celui-ci (juste un exemple):

… Lorsque vous contrôlez + f ou commande + f et effectuez une recherche sur CSS-Tricks, il défilera très lentement au lieu de s'accrocher au résultat, ce qui ralentit considérablement la recherche d'informations et de mots-clés sur CSS-Tricks. En tant que personne qui utilise fréquemment ce raccourci, c'est un problème d'utilisabilité pour moi.

Peu de temps après, je l'ai simplement enlevé. Je n’en avais pas vraiment envie, et le fait que vous n’en ayez pratiquement aucun contrôle, m’a poussé l’idée.

Je le vois souvent comme une «astuce CSS», alors j'ai partagé mon expérience:

Après avoir mentionné cela, Christian Schaefer est intervenu avec une excellente idée:

J'aime ça!

Christian l'a blogué:

Le défilement fluide est par conséquent appliqué à tout. Toujours. Même lorsque vous parcourez les résultats de recherche de page du navigateur. Du moins, c’est le cas pour Chromium. Donc, pour la recherche de page, il serait souhaitable que le navigateur fasse une exception à cette règle et désactive le défilement fluide. Jusqu'à ce que l'équipe Chromium le corrige, voici une astuce pour résoudre le problème par vous-même avec un peu de CSS et de HTML supplémentaires.

Je ne sais pas si Chrome (ou tout autre navigateur) considérerait cela comme un bogue ou non. Je doute que ce soit spécifié, car la recherche sur la page n'est pas vraiment une fonctionnalité de technologie Web. Mais de toute façon, je préfère de loin la recherche sur la page sans cela.

html:focus-within {
  scroll-behavior: smooth;
}

Cela fonctionne principalement. Ce qui est décevant, ce sont des situations comme celle-ci …

Jump down

...

Cela fera sauter la page vers le bas. Avec scroll-behavior: smooth; en place, c’est plutôt sympa. Mais

n'est généralement pas un élément «focalisable». Donc, avec l'astuce ci-dessus, il n'y a plus de focus à l'intérieur plus, et le défilement fluide est perdu. Si vous voulez préserver cela, vous devez faire:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *