Como se menciona en el título, ¿es posible calcular el vwsin las barras de desplazamiento solo en CSS?
Por ejemplo, mi pantalla tiene un ancho de 1920px. vwdevuelve 1920px, genial. Pero el ancho de mi cuerpo real es solo algo así como 1903px.
¿Hay alguna forma de recuperar el 1903pxvalor solo con css (no solo para los hijos directos de body), o necesito absolutamente JavaScript para esto?
width: calc(100vw - scrollbarWidth)donde 'scrollbarWidth' es un valor fijo como 15px
Respuestas:
Una forma de hacerlo es con calc. Hasta donde yo sé, el 100% es el ancho, incluidas las barras de desplazamiento. Entonces, si lo hace:
body {
width: calc(100vw - (100vw - 100%));
}
Obtienes los 100vw menos el ancho de la barra de desplazamiento.
También puede hacer esto con la altura, si desea un cuadrado que sea el 50% de la ventana gráfica, por ejemplo (menos el 50% del ancho de la barra de desplazamiento)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
bodyo un elemento que tiene el mismo ancho que body(de lo contrario, 100%se referirá al ancho del elemento incorrecto). En cuyo caso, simplemente puede usar porcentajes. ¿A menos que me esté perdiendo algo?
100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% ¿me pierdo algo?
Hago esto agregando una línea de javascript para definir una variable CSS una vez que el documento se ha cargado:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
luego, en el CSS, puede usar var(--scrollbar-width)para realizar los ajustes que necesite para diferentes navegadores con / sin barras de desplazamiento de diferentes anchos. Puede hacer algo similar para la barra de desplazamiento horizontal, si es necesario, reemplazando innerWidthcon innerHeighty clientWidthcon clientHeight.
Según las especificaciones , las unidades de longitud relativa de la ventana gráfica no tienen en cuenta las barras de desplazamiento (y de hecho, asumen que no existen).
Entonces, sea cual sea su comportamiento previsto, no puede tener en cuenta las barras de desplazamiento al usar estas unidades.
vwpor especificación, no están al tanto de la existencia de ninguna barra de desplazamiento. Entonces no puedes tenerlos en cuenta.
overflow-y: scrollvs overflow-y: autono parece cambiar el valor calculado para las unidades vw. Específicamente, tengo algo configurado en mi sitio en 3.82vw, y el ancho de mi computadora es 1920px. Con overflow auto, 3.82vw = 73.344px, y luego probé con overflow scroll que también emite 73.344px, sin cambios, cuando en realidad debería emitir 72.6946px si estaba en lo correcto
Los navegadores Webkit excluyen las barras de desplazamiento, otros las incluyen en el ancho devuelto. Por supuesto, esto puede conducir a problemas: por ejemplo, si ha generado contenido dinámicamente con ajax que agrega altura dinámicamente, Safari puede cambiar de un diseño a otro durante la visualización de la página ... Ok, no sucede a menudo, pero es algo para tenga en cuenta. En dispositivos móviles, menos problemas, ya que las barras de desplazamiento generalmente no se muestran.
Dicho esto, si su problema es calcular exactamente el ancho de la ventana gráfica sin barras de desplazamiento en todos los navegadores, hasta donde yo sé, un buen método es este:
width = $('body').innerWidth();
habiendo establecido previamente:
body {
margin:0;
}
La vwunidad no tiene overflow-yen cuenta la barra de desplazamiento cuando overflow-yestá configurada en auto.
Cámbielo a overflow-y: scroll;y la vwunidad será la ventana gráfica sin la barra de desplazamiento.
Único inconveniente a tener en cuenta. Si el contenido cabe en la pantalla, la barra de desplazamiento se muestra de todos modos. La posible solución es cambiar de autoa scrollen javascript.
overflow-x?
overflow-y: scroll;
La única forma en que encontré que funciona sin alterar su código con "calc" es hacer que el tamaño del elemento del contenedor sea 100vw; Añadiendo una envoltura alrededor del contenedor para overflow-x; Esto hará que el contenedor sea de ancho completo como si la barra de desplazamiento estuviera sobre el contenido.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{ overflow-y: scroll; }
html, body{ padding:0; margin: 0;}
#wrapper{ overflow-x: hidden; }
.row{ width: 100vw; }
.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div class="row-left"></div>
<div class="row-right"></div>
</div>
</div>
</body>
</html>Si el caso fuera algo similar a un control deslizante: como se publicó en muchas respuestas, el ancho 100% no tiene en cuenta la barra de desplazamiento, mientras que 100vw sí. En el caso de tener muchos elementos que necesitan tomar el ancho de la ventana y que están anidados dentro de un contenedor que ya tiene el 100% de ancho de ventana (o cuyo ancho de bloque natural sería tal), puedes usar:
en mi caso, tengo que configurar un div 100wh - 230px y estaba enfrentando el mismo problema con ese ancho de desplazamiento adicional, lo que hice es:
width: calc(100vw - (100vw - 100%) - 230px);
No es mi solución, pero me ayuda a crear un menú desplegable de ancho completo con absoluto en elemento relativo en no completo con intervalo.
Deberíamos hacer scroll con css var en: root y luego usarlo.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }