html - style - scrollbar properties




Evite que la barra de desplazamiento se sume al ancho de la página en Chrome (7)

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!

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.


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.


Probablemente

html {
    width: 100vw;
}

es justo lo que quieres


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/


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.


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


.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í.







scrollbar