Rendere la barra di scorrimento principale sempre visibile

Quale CSS è necessario 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 triggersre l’triggerszione della barra di scorrimento)?

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

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

Aggiornamento: Se quanto sopra non funziona il solo usando questo potrebbe.

 html { overflow-y:scroll; } 
 html { overflow-y: scroll; } 

E ‘questo quello che vuoi?

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

Le cose sono cambiate negli ultimi anni. Le risposte sopra non sono più valide in tutti i casi. Apple sta spingendo ovunque le barre di scorrimento a scomparsa . Safari, Chrome e persino Firefox su MacOs (e iOs) mostrano solo barre di scorrimento quando si scorre effettivamente – Non so su Windows / IE corrente. Tuttavia ci sono modi non standard per modellare le barre di scorrimento su Webkit (IE è stato eliminato molto tempo fa).

Assicurati che l’overflow sia impostato su “scroll” e non su “auto”. Detto questo , in OS X Lion, l’overflow impostato su “scroll” si comporta più come auto, in quanto le barre di scorrimento continueranno a essere visualizzate solo quando vengono utilizzate. Quindi, se le soluzioni di cui sopra non sembrano funzionare potrebbe essere il motivo.

Questo è quello che ti serve 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 adattarlo di conseguenza se non ti piace l’impostazione predefinita.

 html {height: 101%;} 

Io uso questa soluzione cross browser (nota: io uso sempre la dichiarazione DOCTYPE in 1a riga, non so se funziona in quirksmode, mai testato ).

Questo mostrerà sempre una barra di scorrimento verticale ACTIVE 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 la barra di scorrimento verticale triggers, e sarà scorrevole solo di pochi pixel.

Se sei ossessionato dalla convalida CSS (sono obeso solo con la convalida HTML) utilizzando questa soluzione il tuo codice CSS verrebbe validato anche per W3C perché non stai usando attributi CSS non standard come -moz-scrollbars-vertical

body { height:101%; } 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 del corpo. È stato più bello per me perché non ho nulla sull’elemento html.

 body { overflow-y: scroll; } 

Un approccio alternativo consiste nel impostare la larghezza dell’elemento html su 100vw. Su molti se non sulla maggior parte dei browser, questo nega l’effetto delle barre di scorrimento sulla larghezza.

 html { width: 100vw; } 

Aggiungi questo codice al tuo foglio di stile CSS:

 html {overflow-y: scroll;} 

Questo è tutto ciò che c’è da fare!

Impostare l’altezza al 101% è la mia soluzione al problema. Le pagine non “sfiorano” più quando si passa da un valore superiore a quello dell’altezza del viewport e viceversa.