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:
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 ?