Fixation de défilement en douce

Notre conception de site V17 (maintenant mise à niveau vers V18) comprenait initialement html { scroll-behavior: smooth; } dans le CSS. Cela a abouti à la rétroaction des utilisateurs mettant en évidence un problème de convivialité significatif: le défilement lent et fluide pendant les recherches Ctrl F ou Cmd F a rendu la recherche d'informations considérablement plus lentement.

Par conséquent, cette fonction a été supprimée. L'absence de contrôle granulaire sur le comportement de défilement en douceur s'est avérée problématique.

Bien que le défilement lisse soit souvent présenté comme une meilleure pratique du CSS, mon expérience a souligné ses inconvénients. Christian Schaefer a cependant offert une solution élégante:

Cette solution de contournement intelligente aborde le conflit entre le défilement en douceur et les fonctionnalités de recherche sur la page. Le billet de blog de Christian détaille cette approche:

Le défilement en douceur affecte tous les éléments de la page, y compris les résultats de recherche du navigateur (au moins en chrome). Idéalement, les navigateurs fourniraient une exception pour les recherches de recherche sur pages. Jusqu'à ce que cela soit abordé, une solution de contournement CSS / HTML est nécessaire.

L'incertitude reste s'il s'agit d'un bug de navigateur ou simplement d'un aspect non traité de la fonctionnalité de recherche sur la page, car il ne s'agit pas d'une fonctionnalité de technologie Web standardisée.

La solution proposée:

 html: focus-within {
  Faites défiler-behavior: lisse;
}

Cela résout largement le problème. Cependant, une limitation se produit avec des éléments non focaux:

 <a href="https://www.php.cn/link/7061e21a9f25d161a08e86b144065bc8">Sauter vers le bas</a>

...

<h2 id="Tête">Tête</h2>

Bien que le défilement en douceur améliore l'expérience de sauter aux liens, le<h2></h2> L'en-tête, généralement falsificable, perd un défilement lisse avec le CSS ci-dessus. Pour maintenir un défilement lisse dans de tels cas, l'ajout tabindex="-1" est nécessaire:

<h2 id="Tête"> Tête</h2>

Cela fournit une approche plus nuancée pour gérer le comportement de défilement en douceur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!