html - personalizar - Hacer la barra de desplazamiento principal siempre visible

ocultar scroll pero que funcione

Question

¿Qué CSS se requiere para hacer que la barra de desplazamiento vertical del navegador permanezca visible cuando un usuario visita una página web (cuando la página no tiene suficiente contenido para activar la activación de la barra de desplazamiento)?

Answer 1

Agregue este código a su hoja de estilo CSS:

html {overflow-y: scroll;}

Eso es todo al respecto !

Answer 2

Asegúrese de que el desbordamiento esté configurado para "desplazarse", no como "automático". Dicho esto , en OS X Lion, el desbordamiento configurado para "desplazarse" se comporta más como automático, ya que las barras de desplazamiento solo se mostrarán cuando se usen. Entonces, si las soluciones anteriores no parecen funcionar, esa podría ser la razón.

Esto es lo que necesitarás para solucionarlo:

::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Puede diseñarlo en consecuencia si no le gusta el valor predeterminado.

Answer 3

Establecer la altura al 101% es mi solución al problema. Sus páginas ya no se "moverán" al cambiar entre las que superan la altura de la ventana gráfica y las que no.

Answer 4

Las cosas han cambiado en los últimos años. Las respuestas anteriores ya no son válidas en todos los casos. Apple está presionando la desaparición de las barras de desplazamiento en todas partes. Safari, Chrome e incluso Firefox en MacOs (y iOs) solo muestran barras de desplazamiento cuando se desplazan realmente: no conozco el Windows / IE actual. Sin embargo, hay formas no estándar de estilo barras de desplazamiento en Webkit (IE cayó hace mucho tiempo).

Answer 5

Pude hacer que esto funcionara al agregarlo a la etiqueta corporal. Fue más agradable para mí porque no tengo nada en el elemento html.

body {
overflow-y: scroll;
}

Answer 6

Un enfoque alternativo es establecer el ancho del elemento html en 100vw. En muchos, sino en la mayoría de los navegadores, esto anula el efecto de las barras de desplazamiento en el ancho.

html { width: 100vw; }

Answer 7

body { height:101%; } body { height:101%; } "recortarán" páginas más grandes.

En cambio, uso:

body { min-height:101%; }

Answer 8

html {
overflow-y: scroll;
}

¿Es eso lo que quieres?

Desafortunadamente, Opera 9.64 parece ignorar esa declaración de CSS cuando se aplica a HTML o BODY , aunque funciona para otros elementos de nivel de bloque como DIV .

Answer 9

html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}

Esto hace que la barra de desplazamiento siempre esté visible y solo esté activa cuando sea necesario.

Actualización: si lo anterior no funciona, simplemente usar esto puede.

html {
overflow-y:scroll;
}

Answer 10

html {height: 101%;}

Uso esta solución de navegadores cruzados (nota: siempre utilizo la declaración DOCTYPE en 1ra línea, no sé si funciona en modo peculiar, nunca lo he probado ).

Esto siempre mostrará una barra de desplazamiento vertical activa en cada página, la barra de desplazamiento vertical se desplazará solo de algunos píxeles.

Cuando el contenido de la página es más corto que el área visible del navegador (puerto de visualización), aún verá la barra de desplazamiento vertical activa, y se podrá desplazar solo de algunos píxeles.

En caso de que estés obsesionado con la validación de CSS (estoy solo con la validación de HTML) al usar esta solución, tu código CSS también validaría para W3C porque no estás usando atributos CSS no estándar como -moz-scrollbars-vertical