Rendere sempre visibile la barra di scorrimento principale

Quali CSS sono necessari per rendere visibile la barra di scorrimento verticale del browser quando un utente visita una pagina Web (quando la pagina non ha abbastanza contenuti per attivare l'attivazione della barra di scorrimento)?

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

Ciò rende la barra di scorrimento sempre visibile e attiva solo quando necessario.

Aggiornamento: se quanto sopra non funziona, il solo utilizzo di questo potrebbe.

html {
    overflow-y:scroll;
}

Assicurati che l'overflow sia impostato su "scroll" non "auto". Detto questo , in OS X Lion, l'overflow impostato su "scroll" si comporta più come auto in quanto le barre di scorrimento mostreranno comunque solo quando vengono utilizzate. Quindi, se una qualsiasi delle soluzioni sopra non sembra funzionare, potrebbe essere il motivo.

Questo è ciò di cui avrai bisogno per risolverlo:

::-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);
}

Puoi modellarlo di conseguenza se non ti piace l'impostazione predefinita.

Le cose sono cambiate negli ultimi anni. Le risposte di cui sopra non sono più valide in tutti i casi. Apple sta spingendo le barre di scorrimento a scomparsa ovunque. Safari, Chrome e persino Firefox su MacOs (e iOs) mostrano le barre di scorrimento solo durante lo scorrimento - non conosco l'attuale Windows / IE. Tuttavia, ci sono modi non standard per lo stile delle barre di scorrimento su Webkit (IE è stato abbandonato molto tempo fa).

html {
    overflow-y: scroll;
}

È questo che vuoi?

Sfortunatamente, Opera 9.64 sembra ignorare quella dichiarazione CSS quando applicata a HTMLo BODY, sebbene funzioni per altri elementi a livello di blocco come DIV.

html {height: 101%;}

Uso questa soluzione cross-browser (nota: utilizzo sempre la dichiarazione DOCTYPE in 1a riga, non so se funziona in quirksmode, non l'ho mai testato ).

Questo mostrerà sempre una barra di scorrimento verticale ATTIVA in ogni pagina, la barra di scorrimento verticale sarà scorrevole solo di pochi pixel.

Quando il contenuto della pagina è più corto dell'area visibile del browser (porta di visualizzazione), vedrai comunque attiva la barra di scorrimento verticale e sarà scorrevole solo di pochi pixel.

Nel caso in cui sei ossessionato dalla convalida CSS (sono ossessionato solo dalla convalida HTML) utilizzando questa soluzione il tuo codice CSS verificherebbe anche per W3C perché non stai usando attributi CSS non standard come -moz-scrollbars-vertical

body { height:101%; } "ritaglia" le pagine più grandi.

Invece, io uso:

body { min-height:101%; }

Sono stato in grado di farlo funzionare aggiungendolo al tag body. È stato più bello per me perché non ho nulla sull'elemento html.

body {
    overflow-y: scroll;
}

Un approccio alternativo consiste nell'impostare la larghezza dell'elemento html su 100vw. In molti, se non nella maggior parte dei browser, ciò annulla l'effetto delle barre di scorrimento sulla larghezza.

html { width: 100vw; }

Impostare l'altezza al 101% è la mia soluzione al problema. Le pagine non "sfogliano" più quando si passa tra quelli che superano l'altezza della finestra e quelli che non lo fanno.

body { 
    min-height: 101vh; 
} 

funziona meglio per me

Lo faccio:

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

Quindi non devo guardare la brutta barra di scorrimento in grigio quando non è necessaria.