Cuando lanzamos el diseño v17 (ahora estamos en v18) de este sitio. yo añadí html { scroll-behavior: smooth; } a la CSS. De inmediato, recibí comentarios como este (solo un ejemplo):
… 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 encontrar información y palabras clave en Programar Plussea mucho más lento. 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 tan fuerte al respecto, y el hecho de que casi no tienes control sobre eso, me hizo aceptar la idea.
Veo que aparece mucho como un “consejo de CSS”, así que intervine con mi experiencia:
Cosa anecdótica: cuando tenía esto puesto @CSS, tuve MUCHOS informes de personas molestas porque cuando “encontraron en la página” y ⬆️⬇️ a través de los resultados, el desplazamiento suave fue lento y molesto. Desafortunadamente, no puedes controlar la velocidad o cuándo sucede. https://t.co/HAio46bYQt
—Chris Coyier (@chriscoyier) 5 de enero de 2021
Después de mencionar eso, Christian Schaefer intervino con una gran idea:
Podrías intentar arreglarlo con
html: enfoque dentro de {
comportamiento de desplazamiento: suave;
}
— Christian Schaefer (@derSchepp) 5 de enero de 2021
¡Amo eso!
Christian lo escribió en su blog:
En consecuencia, se aplica un desplazamiento suave 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. Entonces, 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 arregle, aquí hay un truco para resolver el problema por su cuenta con un poco de CSS y HTML adicionales.
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 función de tecnología web. Pero de todos modos, prefiero encontrar en la página sin él.
html:focus-within {
scroll-behavior: smooth;
}Funciona principalmente. Lo malo de esto son situaciones como esta…
<a href="https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page/#link-down-the-page">Jump down</a>
...
<h2 id="link-down-the-page">Header</h2>Eso saltará la página hacia abajo. Con scroll-behavior: smooth; en su lugar, eso es un poco agradable. Pero <h2> normalmente no es un elemento “enfocable”. Entonces, con el truco anterior, ahora no hay foco dentro <html> más, y se pierde el desplazamiento suave. Si quieres conservar eso, tendrías que hacer:
<h2 tabindex="-1" id="link-down-the-page">Header</h2>