CSS - Overflow: Scroll; - Mostra sempre la barra di scorrimento verticale?

Quindi attualmente ho:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

Tuttavia, non credo che per alcuni utenti sarà ovvio che ci sono più contenuti lì. Potrebbero scorrere verso il basso la pagina senza sapere che il mio div in realtà contiene molti più contenuti. Uso l'altezza 510px in modo che tagli un po 'di testo, quindi su alcune pagine sembra che ci sia più contenuto, ma questo non funziona per tutti.

Sto usando un Mac, e in Chrome e Safari la barra di scorrimento verticale mostrerà solo quando il mouse è sopra il Div e si scorre attivamente. C'è un modo per averlo sempre visualizzato?

Mi sono appena imbattuto in questo problema. OSx Lion nasconde le barre di scorrimento quando non è in uso per farlo sembrare più "liscio", ma allo stesso tempo si presenta il problema che hai affrontato: le persone a volte non riescono a vedere se un div ha una funzione di scorrimento o meno.

La correzione: nel tuo css includi -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

personalizzare l'apparenza secondo necessità. fonte

Nota su iPad Safari, la soluzione di NoviceCoding non funzionerà se ce l'hai - webkit-overflow-scrolling: touch;da qualche parte nel tuo CSS. La soluzione sta rimuovendo tutte le occorrenze -webkit-overflow-scrolling: touch;o inserendo -webkit-overflow-scrolling: auto;la soluzione di NoviceCoding.

Questo funzionerà con iPad su Safari su iOS 7.1.x dai miei test, tuttavia non sono sicuro di iOS 6. Tuttavia, non funzionerà su Firefox. Esiste un plug-in jQuery che mira a essere compatibile con il browser incrociato chiamato jScrollPane .

Inoltre, c'è un post duplicato qui su Stack Overflow che ha alcuni altri dettagli.

In questo modo le barre di scorrimento verranno sempre visualizzate quando è presente contenuto all'interno delle finestre a cui è necessario scorrere per accedere, si applica a tutte le finestre e tutte le app sul Mac:

Avvia Preferenze di Sistema dal menu  Apple Fai clic sul pannello delle impostazioni "Generali" Cerca "Mostra barre di scorrimento" e seleziona il riquadro radio accanto a "Sempre" Al termine delle Preferenze di Sistema