Javascript Agregar Quitar Clase En El Desplazamiento

| | | | | | | | | | | | | | | | | |

Barras de desplazamiento y experiencia de usuario

Los usuarios ahora están acostumbrados a cierta experiencia cuando navegan por sitios web. Por ejemplo, esperaría que el logotipo de una empresa en la esquina superior izquierda de un sitio lo llevara a la página de inicio. Pero, ¿y si no funciona? ¿Qué pasaría si todo en este sitio hiciera lo contrario de lo que pensabas que sería?

Imagina si hubiera una barra de desplazamiento, pero cuando mueves el botón de desplazamiento del mouse o deslizas pasa el dedo por el panel táctil de tu dispositivo, no pasa nada. Se consideraría una experiencia de usuario horrible.

Qué: lo que hace o deshace una buena experiencia de usuario puede ser un trabajo por derecho propio, pero una parte de él: funciona definitivamente la capacidad y las barras se desplazan para ocultarse por razones estéticas.

Las barras de desplazamiento son excelentes indicadores de lo que podemos esperar ver en una página web. Si vemos una barra de desplazamiento, esperaríamos que sea necesario desplazarse hacia abajo para ver el contenido. Cuando no ve una barra de desplazamiento, generalmente se debe a una de estas dos razones:

  1. Lo que ve es lo que obtiene: la altura y el ancho del área visible (la pantalla) corresponden a la altura y el ancho del sitio.
  2. El diseño del sitio incluye una especie de flecha o la función de animación que muestra que hay más contenido disponible a través del desplazamiento. Solo cuando comienza a desplazarse, aparece la barra de desplazamiento. El valor predeterminado es permanecer oculto hasta entonces.
  3. Como desarrollador, implementar el uso correcto de la barra de desplazamiento mejorará la experiencia del usuario de un sitio, lo que mantendrá a los clientes en el sitio.

Lado de la nota: asegúrese de usar barras de desplazamiento horizontales cuando quiera usarlas intencionadamente. Si aparecen involuntariamente en su sitio, generalmente se debe a que hay algún problema con el tamaño del componente. No oculte las barras de desplazamiento horizontales en la objetivo cuando no deberían estar presentes.

Implementación de CSS

Lo primero que debe tener en cuenta sobre esta implementación es que todos los principales navegadores son iguales. Lo que funciona para Firefox no funcionará para Chrome o Internet Explorer y viceversa. CSS utiliza lo que llamamos prefijos de proveedor o prefijos de navegador para ayudarnos a brindar soporte para múltiples navegadores. Los presentamos a continuación:

< br>

Prefijo de proveedor de hoja de referencia

prefijo del proveedor Navegador que cubre
-webkit- Chrome , Safari, versiones más recientes de Opera y la mayoría de los navegadores iOS, incluido Firefox para iOS
-moz - Firefox (no iOS)
-o- Versiones anteriores de Opera
-ms- Internet Explorer y MS Edge

URL: crédito: MDN - Prefijos CSS

Texto alternativo: Mozilla Developer Network ha creado una práctica hoja de trucos para recordar qué prefijo usar

Leyenda: MDN creó una práctica hoja de trucos para recordar qué prefijo usar para el navegador

La pregunta entonces es, cómo ¿Sabemos cuándo necesitamos prefijos y cuándo no? Los creadores de CSS siempre están experimentando con nuevas propiedades y nuevas formas de hacer las cosas. Si hay una propiedad nueva suficiente, probablemente aún no sea compatible con todos los navegadores.

Afortunadamente, existen herramientas que analizan su CSS y añade los prefijos que necesites. También puedes hacerlo manualmente y usar un sitio como caneuse o documentos para su MDN para ayudar a determinar la compatibilidad del navegador.

Let code

Cuando ejecutamos este código en Chrome, debe producir un div de fondo gris y algo de texto que puede desplazarse por. Se incluyen las dos implementaciones más comunes: Firefox está en la parte superior del código en