Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Domina las barras de scroll con variables CSS y JavaScript

Las barras de scroll son un dolor de cabeza en Responsive Web Design pero con un sencillo truco podrás dominarlas de una vez por todas.

Domina las barras de scroll con variables CSS

Un problema común en el responsive web design es comprender a la barra de scroll. ¿Es parte del viewport? ¿Su ancho influye en nuestro diseño web o desmaquetará algo?

Responder a estas preguntas no es sencillo. Digamos que la barra de scroll sí es parte del viewport pero no participa en él. Sí, pero no, como diría Beto.

Sí es parte del viewport porque la podemos ver (de otro modo sería invisible). Pero no es parte del viewport porque no participa en los cálculos de las dimensiones. Te lo explico con el siguiente gráfico:

Papel de la barra de scroll en el calculo del viewport

Como puedes ver si a un elemento (hijo de body) le damos 100% de ancho se extenderá hasta tocar la barra de scroll. Mientras que un elemento con 100vw (100% del ancho del viewport) se extenderá hasta el área ocupada por la barra de scroll (generando un scroll horizontal, no pasando por debajo o por encima ella, lo que demuestra que la barra de scroll no es parte del viewport). Esto suele generar muchos dolores de cabeza a los diseñadores web.

Calcular el ancho de la barra de scroll con JavaScript

Sin embargo, si te fijas bien, del gráfico anterior se deduce que es muy sencillo calcular el ancho de la barra de scroll. Basta una simple función de JavaScript:

const getScrollBarWidth = () => window.innerWidth - document.documentElement.getBoundingClientRect().width

Ahora, llevaremos ese valor a css con una variable.

document.documentElement.style.setProperty('--scrollbar', `${getScrollBarWidth()}px`)

A partir de ahora, en css podemos estar seguros que ningun contenido con viewport se desborde. Por ejemplo:

.container {
  width: calc(100vw - var(--scrollbar))
}

Recalcular el ancho de la barra de scroll al redimensionar la pantalla

Puesto que al redimensionar la pantalla, la barra de scroll puede aparecer o desaparecer, debemos detectar también el evento resize. Por ejemplo, en móvil la barra de scroll no interfiere con el viewport, así que aunque exista scroll su ancho siempre será cero.

Nuestro código finalmente quedará así:

// función para obtener el ancho de la barra de scroll
const getScrollBarWidth = () => window.innerWidth - document.documentElement.getBoundingClientRect().width

// funcion para asignar ese valor a una variable css
const cssScrollBarWidth = () => document.documentElement.style.setProperty('--scrollbar', `${getScrollBarWidth()}px`)

// asignar la variable css al cargar la página
addEventListener('load', cssScrollBarWidth)

// reasignar la variable css al redimensionar la ventana
addEventListener('resize', cssScrollBarWidth)

Basta copiar este código javascript en tu proyecto y saber que tienes a tu disposición la variable css --scrollbar para utilizarla cada vez que la barra de scroll te haga renegar ?

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal