Habilitar desplazamiento condicional en CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más

Habilitar desplazamiento condicional en CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más

Configurar el desplazamiento en elementos del dispositivo donde no se admite el desplazamiento (como móviles, tabletas...) puede ser excesivo. Por ejemplo, si tiene un menú de navegación que tiene un efecto de desplazamiento en un navegador de escritorio, es posible que desee deshabilitar ese efecto de desplazamiento en dispositivos móviles porque no hay soporte de desplazamiento en dispositivos móviles.

Entonces como haces esto? Bueno, hoy aprendí que puedes hacer eso usando el @media solicitud y la any-hover funcionalidad multimedia.

Esencialmente, el any-hover la función de medios es una consulta de medios que devuelve true si el dispositivo admite hover y false Si no es el caso. Por lo tanto, puede usar esta consulta de medios para deshabilitar el desplazamiento en dispositivos que no lo admiten.

Así es como puedes hacerlo.

@media (any-hover: hover) {
    .nav-item:hover {
        background-color: #ccc;
    }
}

Entonces, ahora el efecto de desplazamiento solo se habilitará en los dispositivos que lo admitan. Y en los dispositivos que no lo admitan, el efecto de desplazamiento estará deshabilitado.

La función también es ampliamente compatible con la mayoría de los navegadores modernos. Puede ver la tabla de soporte aquí.

Si quieres conocer otros artículos parecidos a Habilitar desplazamiento condicional en CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas