Cambiar estilo scroll css

Ocultación de la barra de desplazamiento Css

Las barras de desplazamiento personalizadas son cada vez más populares hoy en día, y tengo muchas ganas de profundizar en ellas. Hay diferentes razones para personalizar una barra de desplazamiento. Por ejemplo, la barra de desplazamiento por defecto puede hacer que la interfaz de usuario de una aplicación parezca inconsistente en varios sistemas operativos, y aquí podemos obtener el beneficio de tener un estilo unificado.

Siempre he estado interesado en aprender cómo personalizar una barra de desplazamiento en CSS pero no he tenido la oportunidad de hacerlo. En este artículo, voy a aprovechar la oportunidad y aprender sobre ellos y documentar este viaje.

Hay una cosa importante a tener en cuenta que una barra de desplazamiento puede trabajar horizontal o verticalmente, dependiendo del diseño. Además, eso puede cambiar cuando se trabaja en un sitio web multilingüe que funciona tanto en dirección de izquierda a derecha (LTR) como de derecha a izquierda (RTL).

Tener una barra de desplazamiento personalizada solía ser sólo para webkit, así que Firefox e IE estaban fuera del juego. Tenemos una nueva sintaxis que sólo funciona en Firefox y que nos facilitará las cosas cuando sea totalmente compatible. Voy a repasar la antigua sintaxis de Webkit y luego la nueva.

Barra de desplazamiento personalizada js

::-webkit-scrollbarNo es estándar: Esta característica no es estándar y no está en un camino de estándares. No la utilices en sitios de producción de cara a la web: no funcionará para todos los usuarios. También puede haber grandes incompatibilidades entre implementaciones y el comportamiento puede cambiar en el futuro.

Nota: ::-webkit-scrollbar sólo está disponible en los navegadores basados en Blink y WebKit (por ejemplo, Chrome, Edge, Opera, Safari, todos los navegadores en iOS y otros). Existe un método estandarizado para estilizar las barras de desplazamiento con scrollbar-color y scrollbar-width.

Barra de desplazamiento personalizada

No todas las páginas de mi blog, pero esta página en particular tiene una barra de desplazamiento personalizada. Mira la barra de desplazamiento cuidadosamente. Sí, es diferente de una barra de desplazamiento por defecto. Es una barra de desplazamiento diseñada a medida. Te mostraré cómo crear una barra de desplazamiento personalizada y responsiva usando CSS puro.

Las barras de desplazamiento son muy comunes. Lo verás en una página web, en elementos como &ltdiv> o &ltp> etc. Si quieres añadir una barra de desplazamiento a un elemento como un &ltdiv>, tendrás que utilizar la propiedad CSS overflow. Las barras de desplazamiento pueden ser verticales (eje Y) u horizontales (eje X). Implementar una barra de desplazamiento personalizada a los elementos es lo mismo.

Ahora, déjame explicar todos los pseudo-elementos CSS que he utilizado dentro de la etiqueta &ltstyle>. El ::-webkit-scrollbar se utiliza para dar estilo a la barra de desplazamiento de un elemento.- ::-webkit-scrollbar – Aquí he especificado el ancho de la barra de desplazamiento, que es de 5px. Usted puede cambiar el píxel de acuerdo a su elección.

– ::-webkit-scrollbar-track – Aquí he asignado algunos valores para el track. La pista es donde la barra de desplazamiento se mueve hacia arriba y hacia abajo. Puedes cambiar el valor de rgba() a, digamos, verde y ver cómo queda. Por ejemplo, rgba(255,10,0,0.5)

Css custom scrollbar firefox

Ya sea por razones de diseño o funcionalidad, es fácil ocultar la barra de desplazamiento en una página o elemento de página con un poco de CSS. Hay varias maneras de hacerlo – ocultar la barra de desplazamiento mientras se permite el desplazamiento, ocultarla mientras se desactiva el desplazamiento, y mantener la barra de desplazamiento oculta sólo hasta que se necesite – algunas de las cuales funcionarán mejor según su caso.

Por desgracia, no existe una regla CSS específica para ocultar la barra de desplazamiento y mantener la capacidad de desplazarse hacia abajo en una página o elemento. Sin embargo, esto es posible con algunas reglas CSS específicas del navegador. Para ocultar la barra de desplazamiento y mantener la funcionalidad de desplazamiento, aplique el siguiente CSS al cuerpo (para toda la página) o a un elemento específico.

/* ocultar la barra de desplazamiento pero permitir el desplazamiento */elemento { -ms-overflow-style: none; /* para Internet Explorer, Edge */ scrollbar-width: none; /* para Firefox */ overflow-y: scroll; }elemento::-webkit-scrollbar { display: none; /* para Chrome, Safari y Opera */}

Para evitar el desplazamiento con esta propiedad, basta con aplicar la regla overflow: hidden al cuerpo (para toda la página) o a un elemento contenedor. Esto oculta todo el contenido más allá del borde del elemento. Alternativamente, use overflow: visible para mostrar el contenido que se extiende más allá de los bordes del contenedor.