personalizado - scrollbar css generator
Evita que 100vw cree scroll horizontal (8)
Aquí está mi solución al problema de 100vw añadiendo un desplazamiento horizontal:
html {
width: calc(100% + calc(100vw - 100%));
overflow-x: hidden;
}
.box {
width: calc(100% + calc(100vw - 100%));
}
Si un elemento se establece en width: 100vw; y hay una barra de desplazamiento vertical, el ancho del elemento será igual a la ventana gráfica más el ancho de la barra de desplazamiento.
¿Es posible prevenir esto?
¿Es posible evitar esto sin desactivar el desplazamiento horizontal en toda la página? Aparte de cambiar mi css / markup para hacer el elemento 100% del ancho del cuerpo, no puedo pensar en nada.
Probado en Chrome versión 43.0.2357.81 m & FF 36.0.1 y Opera 20.0.1387.91 en Windows 8.1
Aquí está el código solicitado:
html
<div class="parent">
<div class="box"></div>
</div>
<div class="tall"></div>
css
body { margin: 0; }
html { box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit;
position: relative;
}
.parent {
background: rgba(0, 0, 0, .4);
height: 100px;
width: 5rem;
margin-bottom: 25px;
}
.box {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, .4);
height: 50px;
width: 100vw;
}
.tall {
height: 100rem;
}
Arreglé esto en mi sitio agregando el cuerpo {overflow-x: hidden} a la página en cuestión.
Funciona en tu ejemplo también.
Básicamente, la respuesta es no, si tiene una barra de desplazamiento vertical, no hay manera de que 100vw sea igual al ancho de la ventana visible. Aquí están las soluciones que he encontrado para este problema.
advertencia: no he probado estas soluciones para el soporte del navegador
tl; dr
Si necesita que un elemento tenga un ancho del 100% de la ventana visible (viewport minus scrollbar), deberá configurarlo al 100% del cuerpo. No puedes hacerlo con unidades vw si hay una barra de desplazamiento vertical.
1. Coloca todos los elementos antecesores en posición estática.
Si te aseguras de que todos los ancestros de .box estén configurados en position: static; luego establezca .box al width: 100%; Así será el 100% del ancho del cuerpo. Sin embargo, esto no siempre es posible. A veces necesitas que uno de los ancestros sea position: absolute; o position: relative; .
2. Mueve el elemento fuera de los antepasados no estáticos
Si no puede establecer los elementos del antepasado en position: static; Necesitarás mover .box fuera de ellos. Esto le permitirá configurar el elemento al 100% del ancho del cuerpo.
3. Eliminar la barra de desplazamiento vertical
Si no necesita un desplazamiento vertical, puede eliminar la barra de desplazamiento vertical configurando el elemento <html> en overflow-y: hidden; .
4. Eliminar barra de desplazamiento horizontal Esto no soluciona el problema, pero puede ser adecuado para algunas situaciones.
Configurando el elemento <html> en overflow-y: scroll; overflow-x: hidden; overflow-y: scroll; overflow-x: hidden; evitará que aparezca la barra de desplazamiento horizontal, pero el elemento de 100 vw seguirá desbordándose.
Viewport-Porcentajes de longitudes espec.
Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene. Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia. Sin embargo, cuando el valor de desbordamiento en el elemento raíz es automático, se supone que no existen barras de desplazamiento. Tenga en cuenta que el tamaño del bloque contenedor inicial se ve afectado por la presencia de barras de desplazamiento en la ventana gráfica.
Parece que hay un error porque las unidades vw solo deberían incluir el ancho de la barra de desplazamiento cuando el desbordamiento se establece en automático en el elemento raíz. Pero he intentado configurar el elemento raíz para overflow: scroll; Y no cambió.
Esto es lo que hago:
div.screenwidth{
width:100%; /* fallback for browsers that don''t understand vw or calc */
width: calc(100vw - 17px); /* -17 because vw is calculated without the scrollbar being considered & 17px is width of scrollbars */
position:relative; /* use this if the parent div isn''t flush left */
right: calc((100vw - 17px - 100% )/2);
}
Los rellenos y los bordes pueden interferir. Así puede márgenes. Usa box-sizing para calcular el ancho incluyendo estos atributos. Y tal vez elimine el margen (si lo hay) del ancho.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0; /* interferes with 100vw */
}
.parent {
width: 100vw;
max-width: 100%; /* see below */
}
.box {
width: 100%; /* For those good old-fashioned browsers with no vw or calc() support */
width: -webkit-calc(100vw - [your horizontal margin, if any]);
width: -moz-calc(100vw - [your horizontal margin, if any]);
width: calc(100vw - [your horizontal margin, if any]);
max-width: 100%
}
Parece que tienes que agregar max-width: 100%; si hay un reflujo que está causando que la barra de desplazamiento aparezca después del cálculo inicial del ancho de la ventana gráfica. Esto no parece ocurrir en los navegadores sin una barra de desplazamiento interferente (iOS, OS X, IE 11 Metro), pero puede afectar a todos los demás navegadores.
Sé que esta es una pregunta antigua, pero el error aún existe en los navegadores modernos. No me gustó la idea de hacer overflow-x: hidden así que esto es lo que hice. Un ejemplo completo está disponible aquí: http://codepen.io/bassplayer7/pen/egZKpm
Mi enfoque fue determinar el ancho de la barra de desplazamiento y usar calc() para reducir los 100vw en la cantidad de la barra de desplazamiento. Esto es un poco más complicado porque en mi caso, estaba sacando el ancho del contenido de una caja que tenía una definida, así que también tenía que declarar el margen.
Algunas notas sobre el código a continuación: primero, noté que 20px parece ser un número mágico bastante amplio para las barras de desplazamiento. Utilizo una variable SCSS (no tiene que ser SCSS) y el código fuera de @supports como respaldo.
Además, esto no garantiza que nunca haya barras de desplazamiento. Debido a que requiere Javascript, los usuarios que no tengan habilitado verán barras de desplazamiento horizontal. Podría overflow-x: hidden configurando overflow-x: hidden y luego agregando una clase para anularlo cuando se ejecute Javascript.
Código Completo:
$scroll-bar: 20px;
:root {
--scroll-bar: 8px;
}
.screen-width {
width: 100vw;
margin: 0 calc(-50vw + 50%);
.has-scrollbar & {
width: calc(100vw - #{$scroll-bar});
margin: 0 calc(-50vw + 50% + #{$scroll-bar / 2});
}
@supports (color: var(--scroll-bar)) {
.has-scrollbar & {
width: calc(100vw - var(--scroll-bar));
margin: 0 calc(-50vw + 50% + (var(--scroll-bar) / 2));
}
}
}
Entonces este Javascript establecerá la propiedad personalizada de CSS:
function handleWindow() {
var body = document.querySelector(''body'');
if (window.innerWidth > body.clientWidth + 5) {
body.classList.add(''has-scrollbar'');
body.setAttribute(''style'', ''--scroll-bar: '' + (window.innerWidth - body.clientWidth) + ''px'');
} else {
body.classList.remove(''has-scrollbar'');
}
}
handleWindow();
Como nota al margen, los usuarios de Mac pueden probar esto yendo a Preferencias del sistema -> General -> Mostrar barras de desplazamiento = Siempre
También estaba luchando con esto, y también pensé en las variables CSS como la solución. Las variables CSS no son compatibles con IE11, así que intenté algo más:
Lo arreglé calculando el ancho de la barra de desplazamiento: restando el ancho del body (sin incluir la barra de desplazamiento) del ancho de la window (incluida la barra de desplazamiento). Lo uso para agregarlo al 100% del cuerpo, vea la variable plusScrollBar .
JS:
// calculate width of scrollbar and add it as inline-style to the body
var checkScrollBars = function() {
var b = $(''body'');
var normalw = 0;
var scrollw = 0;
normalw = window.innerWidth;
scrollw = normalw - b.width();
var plusScrollBar = ''calc('' + ''100% + '' + scrollw + ''px)''
document.querySelector(''body'').style.minWidth = plusScrollBar;
}();
CSS:
html{
overflow-x: hidden;
}
Por qué me gusta esto: toma en consideración que no todas las barras de desplazamiento tienen el mismo ancho o se consideran espacio conservado en absoluto. :)
Un elemento con width: 100vw solo causa barras de desplazamiento horizontal cuando uno de sus padres tiene un relleno horizontal. De lo contrario debería encajar bien.
Verifique este fiddle: http://jsfiddle.net/1jh1cybc/ El .parent2 tiene un relleno, lo que hace que el .box interno .box del ancho de su padre.
Editar:
En tu caso supongo que tu body tiene un margen. Verifique este código con su código e intente eliminar la regla de css del cuerpo: http://jsfiddle.net/1jh1cybc/1/