Arreglando el desplazamiento suave con Find-on-Page

Cuando lanzamos el diseño v17 (ahora estamos en la v18) de este sitio. Agregué al CSS. De inmediato recibí comentarios como este (solo un ejemplo):html { scroll-behavior: smooth; }

… cuando controlas+f o comando+f y buscas en CSS-Tricks, se desplazará muy lentamente en lugar de ajustarse al resultado, lo que hace que la búsqueda de información y palabras clave en CSS-Tricks sea mucho más lenta. Como alguien que usa este atajo con frecuencia, este es un problema de usabilidad para mí.

No mucho después, simplemente lo eliminé. No me sentía muy convencido al respecto, y el hecho de que casi no tienes control sobre ello me hizo aceptar la idea.

Lo veo muchas veces como un “consejo CSS”, así que intervengo con mi experiencia:

Cosa anecdótica: cuando tenía esto en @CSS , recibí MUCHOS informes de personas molestas que cuando “buscaban en la página” y ⬆️⬇️ a través de los resultados, el desplazamiento suave era lento y molesto. Desafortunadamente, no puedes controlar la velocidad ni cuándo sucede. https://t.co/HAio46bYQt

– Chris Coyier (@chriscoyier) 5 de enero de 2021

Después de mencionar esto, Christian Schaefer intervino con una gran idea:

Podrías intentar solucionarlo con

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

– Christian Schaefer (@derSchepp) 5 de enero de 2021

¡Me encanta eso!

Christian lo escribió en su blog :

En consecuencia, el desplazamiento suave se aplica a todo. Siempre. Incluso al recorrer los resultados de búsqueda de la página del navegador. Al menos ese es el caso de Chromium. Por lo tanto, para la búsqueda de páginas sería deseable que el navegador hiciera una excepción a esa regla y desactivara el desplazamiento suave. Hasta que el equipo de Chromium lo solucione, aquí tienes un truco para resolver el problema por tu cuenta con un poco más de CSS y HTML.

No estoy seguro de si Chrome (o cualquier otro navegador) lo consideraría un error o no. Dudo que esté especificado ya que la búsqueda en la página no es realmente una característica de la tecnología web. Pero de todos modos, prefiero buscar en la página sin él.

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

Básicamente funciona. Lo malo de esto son situaciones como esta…

a href="#link-down-the-page"Jump down/a...h2Header/h2

Eso hará saltar la página hacia abajo. Estando scroll-behavior: smooth;en su lugar, eso es bastante bueno. Pero h2normalmente no es un elemento “enfocable”. Entonces, con el truco anterior, ya no hay enfoque interno htmly se pierde el desplazamiento suave. Si quieres conservar eso, tendrías que hacer:

h2 tabindex="-1"Header/h2