css - units - ¿Es posible calcular el ancho de la ventana gráfica(vw) sin la barra de desplazamiento?

viewport css

Question

Como se mencionó en el título, ¿es posible calcular el vw sin las barras de desplazamiento solo en css?

Por ejemplo, mi pantalla tiene un ancho de 1920px . vw regresa 1920px , genial. Pero el ancho real de mi cuerpo es solo algo así como 1903px .

¿Hay alguna forma de recuperar el valor de 1903px solo con css (no solo para los hijos directos del body ), o necesito JavaScript para esto?

Answer 1

De acuerdo con las especificaciones , las unidades de longitud relativa de la ventana gráfica no tienen en cuenta las barras de desplazamiento (y, de hecho, suponen que no existen).

Entonces, cualquiera que sea su comportamiento deseado, no puede tener en cuenta las barras de desplazamiento al usar estas unidades.

Answer 2

La unidad vw no tiene en cuenta la barra de desplazamiento de overflow-y cuando el overflow-y está configurado en auto .

Cámbielo a overflow-y: scroll; y la unidad vw será la ventana gráfica sin la barra de desplazamiento.

Único inconveniente a tener en cuenta. Si el contenido se ajusta a la pantalla, la barra de desplazamiento se muestra de todos modos. La posible solución es cambiar de auto a scroll en javascript.

Answer 3

Los navegadores Webkit excluyen las barras de desplazamiento, otros los incluyen en el ancho devuelto. Por supuesto, esto puede llevar a problemas: por ejemplo, si ha generado dinámicamente contenido 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 ser consciente de En el móvil, menos problemas, porque 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, que yo sepa, un buen método es este:

   width = $(''body'').innerWidth();

habiendo establecido previamente:

body {
    margin:0;
  }

Answer 4

Una forma de hacer esto es con calc. Por lo que yo sé, el 100% es el ancho incluyendo barras de desplazamiento. Así que si lo haces:

body {
  width: calc(100vw - (100vw - 100%));
}

Obtienes los 100vw menos el ancho de la barra de desplazamiento.

También puedes hacer esto con la altura, si quieres 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))
}