Evite que la barra de desplazamiento se agregue al ancho de la página en Chrome


125

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 una gran cantidad de contenido que desborda la altura de la ventana gráfica (¿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 (¿se suman 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 encontré esto en Chrome.

Respuestas:


42

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/


1
¡Solución inteligente, aunque no entiendo la condición en el 'si'!
Acemad

3
ScrollHeight es la altura total de un elemento. Lo que ves y lo que se esconde. Un ejemplo: su ventana tiene una altura de 500px, el cuerpo tiene un contenido de 900px. Se muestran 500px pero los otros 400px están ocultos y la barra de desplazamiento aparecerá para mostrar este píxel remanente. Entonces, la condición es como "si la altura de todo el contenido es mayor que la altura del punto de vista, agregue el margen al cuerpo". Perdón por mi mal inglés
Lwyrn

Lo tengo ahora, gracias por la explicación clara, probé esta solución y obtuve una barra de desplazamiento horizontal adicional, aunque no sé por qué.
Acemad


4
Esta solución deshabilita el desplazamiento
avalanche1

117

DESCARGO DE RESPONSABILIDAD : la superposición ha quedado obsoleta .
Aún puede usar esto si es absolutamente necesario, pero trate de no hacerlo.

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

.yourContent{
   overflow-y: overlay;
}

¡Esto hará que la barra de desplazamiento aparezca solo como una superposición , por lo que no afectará el ancho de su elemento!


No funciona para IE11. ¿Hay alguna solución para que el valor de superposición funcione en IE?
Anvesh Reddy

no que yo sepa, tendrá que conformarse con las otras opciones propuestas en este hilo para IE
simonDos

¡Mucho requerido! Tardé más de media hora en ver qué diablos hice mal con mi marca. ¿Qué estilos usé en exceso? Esto también debería ser predeterminado.
kushalvm

3
Pero está en desuso
Akash Yellappa

1
Actualicé la solución para reflejar eso. Un poco triste: P
simonDos

57

Todo lo que necesita hacer es agregar:

html {
    overflow-y: scroll;
}

En su archivo css, ya que este tendrá el desplazamiento, ya sea que sea necesario o no, aunque simplemente no podrá desplazarse

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


4
entonces, ¿estoy obligado a agregar barras de desplazamiento a ambos? ¿No hay una manera de ignorar el ancho de la barra de desplazamiento vertical? Gracias !
Acemad

No hay forma de ignorarlo que yo sepa, pero lo que dije funciona muy bien @ Rockr90
Hive7

@ d3c0y esto es cierto y lo he mencionado en la respuesta, pero es el método más fácil para hacerlo. Sin embargo, no sé si eso ha cambiado en los últimos 3 años.
Hive7

@aks. Obliga al navegador a pensar que puede desplazarse, por lo que habilita la barra de desplazamiento y el desplazamiento y es el desplazamiento lateral
Hive7

1
overflow-y: desplazamiento; agregará / mostrará la barra de desplazamiento en todas las ventanas de visualización, incluso si no hay elementos desplazables.
Abhilash

35

Probablemente

html {
    width: 100vw;
}

es justo lo que quieres.


1
Esto funcionó muy bien para mi caso de uso: gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 Estoy usando calc()para determinar el ancho de la vista de contenido principal para que el navegador fijo fuera de la pantalla pueda ocupar el lado izquierdo de la pantalla en el escritorio, todo mientras se conserva nativo desplazarse en el móvil.
bmcminn

3
He estado jugando con mis barras de desplazamiento durante las últimas 36 horas. He tenido algunas soluciones diferentes que funcionaron, pero plantearon otros problemas. Esta es la primera solución que funciona y me permite usar una barra de desplazamiento normal en otro lugar. Gracias.
kosher

¡De nada! Pero jugar con htmlel ancho de 'en vws es un poco complicado , ¡así que tenga cuidado!
Neurotransmisor

Esto funcionó muy bien, ¿alguien puede explicar cómo funciona esto?
Zeus

1
La solución no está mal, pero podría agregar desplazamiento horizontal.
FDisk

18

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

Intente usar en su overflow-y: overlaylugar.


9
No publique respuestas idénticas a varias preguntas. Publique una buena respuesta, luego vote / marque para cerrar las otras preguntas como duplicadas. Si la pregunta no es un duplicado, adapte sus respuestas a la pregunta.
Paul Roub

Esto debería funcionar, pero la superposición aún no es estándar ni es compatible con todos los navegadores.
Zia Ul Rehman Mughal

Hipo rápido: en Safari, esto hizo que la página dejara de desplazarse
joshfindit

13

Encontré que podí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). ¡Bueno para cuando no quieres una barra de desplazamiento que te distraiga en tu página!


5
Es algo arriesgado y no es una solución para
varios

4

Para contenedores con un ancho fijo, se puede lograr una solución de navegador cruzado 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


3

No parece que mi otra respuesta esté funcionando bien en este momento (pero seguiré intentando que funcione).

Pero básicamente lo que debe hacer, y lo que estaba tratando de hacer de forma dinámica, es establecer el ancho del contenido en un poco menos que el del panel principal desplazable.
Para que cuando aparezca la barra de desplazamiento no afecte al contenido.

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


Esa es una buena solución, sin embargo, estoy trabajando en un sitio web receptivo usando Bootstrap, y es importante automatizar el ancho y todo, ¿qué dices?
Acemad

bueno, a menos que (en orden de probabilidad descendente): alguien descubra cómo hacer que mi otra respuesta funcione (ya sea con relleno o con margen); de alguna manera, puede utilizar consultas de medios para aplicar el relleno de forma selectiva; o las expresiones CSS se implementan en los navegadores modernos para aplicar el relleno de forma selectiva. Creo que solo una barra de desplazamiento permanente o el uso de JS para detectar la barra de desplazamiento es el camino a seguir
Hashbrown

1

EDITAR: esta respuesta no es del todo correcta en este momento, consulte mi otra respuesta para ver lo que estaba intentando hacer aquí. Estoy tratando de arreglarlo, pero si puedes ofrecer ayuda, hazlo en los comentarios, ¡gracias!

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

EJEMPLO

Devtools cromados que muestran el relleno impasible

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


3
El ancho de la barra de desplazamiento puede cambiar según el sistema operativo y el navegador que esté utilizando. Puede medir 20 píxeles
40

2
bueno, usaría el máximo de todos los valores posibles
Hashbrown

1
Los pergaminos del navegador de algunos dispositivos / SO ni siquiera tienen ancho.
Sergey Goliney

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

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

En realidad, esto es lo único que funcionó para mí.


0

Tuve el mismo problema en Chrome. Solo me sucedió cuando la barra de desplazamiento siempre está visible. (que se encuentra en la configuración general) Tengo un modal y cuando abro el modal noté que ...

body {
    padding-left: 15px;
}

se agrega al cuerpo. Para evitar que esto suceda, agregué

body {
    padding-left: 0px !important;
}

0

No puedo agregar comentarios para la primera respuesta y ha pasado mucho tiempo ... pero esa demostración tiene un problema:

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

b.prop ('scrollHeight') siempre es igual a b.height (),

Creo que debería ser así:

if(b.prop('scrollHeight')>window.innerHeight) ...

Por fin recomiendo un método:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.