html - personalized - Evite que la barra de desplazamiento se sume al ancho de la página en Chrome

scrollbar css

Question

Tengo un pequeño problema al tratar de mantener mis páginas .html con un ancho constante en Chrome. Por ejemplo, tengo una página (1) con muchos contenidos que desbordan la altura de la ventana (palabra correcta?), Por lo que hay una barra de desplazamiento vertical en esa página (1). En la página (2) tengo el mismo diseño (menús, divs, ... etc) pero menos contenido, por lo que no hay barras de desplazamiento verticales allí.

El problema es que en la página (1) las barras de desplazamiento parecen empujar los elementos ligeramente hacia la izquierda (sumando al ancho?) Mientras que todo aparece bien centrado en la página (2)

Todavía soy un principiante en HTML / CSS / JS, y estoy bastante convencido de que esto no es tan difícil, pero no tuve suerte para encontrar la solución. Funciona según lo previsto en IE10 y FireFox (barras de desplazamiento que no interfieren), solo lo encontré en Chrome.

Answer 1

Encontré que podría agregar

::-webkit-scrollbar { 
display: none; 
}

directamente a mi CSS y haría invisible la barra de desplazamiento, pero aún así me permitiría desplazarme (al menos en Chrome). ¡Es bueno para cuando no quieres una barra de desplazamiento que distrae en tu página!

Answer 2

Los navegadores Webkit como Safari y Chrome restan el ancho de la barra de desplazamiento del ancho de página visible al calcular el ancho: 100% o 100vw. Más en Desplazamiento y ancho de página de DM Rutherford .

Intenta usar overflow-y: overlay lugar.

Answer 3

No parece que mi otra respuesta esté funcionando correctamente en este momento (pero continuaré tratando de ponerla en funcionamiento).

Pero básicamente lo que tendrá que hacer, y lo que estaba tratando de hacer dinámicamente, es establecer el ancho del contenido a un poco menos que el del panel principal desplazable.
De modo que cuando aparece la barra de desplazamiento no tiene efecto sobre el contenido.

Este EXAMPLE muestra una forma más extravagante de lograr ese objetivo, codificando el width s en lugar de intentar que el navegador lo haga por nosotros a través del padding .
Si esto es factible, esta es la solución más simple si no desea una barra de desplazamiento permanente.

Answer 4

Probablemente

html {
    width: 100vw;
}

es justo lo que quieres

Answer 5

Puede obtener el tamaño de la barra de desplazamiento y luego aplicar un margen al contenedor.

Algo como esto:

var checkScrollBars = function(){
    var b = $(''body'');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop(''scrollHeight'')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $(''#container'').css({marginRight:''-''+scrollw+''px''});
    }
}

CSS para eliminar la barra de desplazamiento h:

body{
    overflow-x:hidden;
}

Intente echar un vistazo a esto: http://jsfiddle.net/NQAzt/

Answer 6

Todo lo que necesitas hacer es agregar:

html {
    overflow-y: scroll;
}

En tu archivo css ya que este tendrá el desplazamiento, ya sea que sea necesario o no, sin embargo, no podrás desplazarte

Esto significa que la ventana gráfica tendrá el mismo ancho para ambos

Answer 7

Viejo hilo, pero sigue siendo relevante

Esto solo funciona en los navegadores WebKit , pero me gusta mucho. Se comportará como auto en otros navegadores.

.yourContent{
   overflow-y: overlay;
}

Esto hará que la barra de desplazamiento aparezca solo como una superposición , sin afectar el ancho de su elemento.

Answer 8

Para contenedores con un ancho fijo, se puede lograr una solución de navegador cruzado de CSS puro envolviendo el contenedor en otro div y aplicando el mismo ancho a ambos divs.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Haga clic aquí para ver un ejemplo en Codepen

Answer 9

_{EDITAR: esta respuesta no está del todo bien en este momento, consulte mi otra respuesta para ver qué estaba intentando hacer aquí. Estoy tratando de arreglarlo, pero si puedes ofrecer ayuda, hazlo en los comentarios, ¡gracias!}

El uso de padding-right mitigará la aparición repentina de una barra de desplazamiento

EXAMPLE

Como puede ver en los puntos, el texto llega al mismo punto en la página antes de envolver, independientemente de si hay una barra de desplazamiento presente o no.
Esto se debe a que cuando se introduce una barra de desplazamiento, el relleno se esconde detrás, por lo que la barra de desplazamiento no empuja el texto.

Answer 10

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

donde 300 px es la mitad del ancho de mi ventana de diálogo.

Esto es realmente lo único que funcionó para mí.