risposta-alla-domanda-sullo-sviluppo-web-bd.com

come posso aggiungere automaticamente una barra di scorrimento verticale al mio div?

Voglio aggiungere la barra di scorrimento verticale al mio <Div>. Ho provato overflow:auto, ma non funziona. Ho testato il mio codice in Firefox e Chrome. Sto incollando il codice dello stile Div qui:

float:left;
width:1000px;
overflow: auto;
85
jay

È necessario assegnare un po 'di altezza per far funzionare la proprietà overflow: auto;.
A scopo di test, aggiungere height: 100px; e controllare.
e inoltre sarà meglio se si attribuisca overflow-y:auto; anziché overflow: auto;, poiché ciò rende l'elemento solo scorrimento verticale ma non orizzontale.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

Se non si conosce l'altezza del contenitore e si desidera mostrare la barra di scorrimento verticale quando il contenitore raggiunge un'altezza fissa dire 100px, utilizzare max-height anziché la proprietà height.

Per ulteriori informazioni, leggi questo articolo MDN .

117
Mr_Green

Devi aggiungere la proprietà max-height.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>
39
DevT

Puoi impostare:

overflow-y: scroll;height: XX px
13
user5650798

Ho ottenuto uno scroller incredibile sul mio div-popup. Per applicare, aggiungi questo stile al tuo elemento div:

overflow-y: scroll;
height: XXXpx;

Il height che hai specificato sarà l'altezza del div e una volta se hai dei contenuti da superare questa altezza, devi scrollarlo.

Grazie.

11
Ataboy Josef

Non sono abbastanza sicuro di cosa stai tentando di usare il div, ma questo è un esempio con un testo casuale.

Mr_Green ha dato le istruzioni corrette quando ha detto di aggiungere overflow-y: auto come che lo limita allo scrolling verticale. Questo è un esempio di JSFiddle:

JSFiddle

9
MitulP91

Per mostrare la barra di scorrimento verticale nel div è necessario aggiungere

height: 100px;   
overflow-y : scroll;

o

height: 100px; 
overflow-y : auto;
8
Ricardo Romo
::-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);
}
2
GURU PRASAD