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;
È 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 .
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>
Puoi impostare:
overflow-y: scroll;height: XX px
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.
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:
Per mostrare la barra di scorrimento verticale nel div è necessario aggiungere
height: 100px;
overflow-y : scroll;
o
height: 100px;
overflow-y : auto;
::-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);
}