Hacer que la barra de desplazamiento principal esté siempre visible

¿Qué CSS se requiere para 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)?

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

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

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

html {
    overflow-y:scroll;
}

Asegúrese de que el desbordamiento esté configurado en "desplazamiento", no en "automático". Con eso dicho , en OS X Lion, el desbordamiento configurado como "desplazamiento" se comporta más como automático en que las barras de desplazamiento solo se mostrarán cuando se usen. Entonces, si alguna de las soluciones anteriores no parece estar funcionando, ese podría ser el motivo.

Esto es lo que necesitará 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.

Las cosas han cambiado en los últimos años. Las respuestas anteriores ya no son válidas en todos los casos. Apple está presionando las barras de desplazamiento que desaparecen en todas partes. Safari, Chrome e incluso Firefox en MacOs (e iOs) solo muestran barras de desplazamiento cuando realmente se desplazan: no sé sobre Windows / IE actual. Sin embargo, hay formas no estándar de diseñar barras de desplazamiento en Webkit (IE lo dejó hace mucho tiempo).

html {
    overflow-y: scroll;
}

¿Es eso lo que quieres?

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

html {height: 101%;}

Uso esta solución de navegadores cruzados (nota: siempre uso la declaración DOCTYPE en la primera línea, no sé si funciona en modo peculiar, nunca lo probé ).

Esto siempre mostrará una barra de desplazamiento vertical ACTIVO en cada página, la barra de desplazamiento vertical será desplazable solo de unos pocos píxeles.

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

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

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

En cambio, uso:

body { min-height:101%; }

Pude hacer que esto funcione al agregarlo a la etiqueta del cuerpo. Fue mejor para mí porque no tengo nada en el elemento html.

body {
    overflow-y: scroll;
}

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

html { width: 100vw; }

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

body { 
    min-height: 101vh; 
} 

funciona mejor para mi

Hago esto:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Entonces no tengo que mirar la barra de desplazamiento fea y gris cuando no es necesaria.