web-dev-qa-db-fra.com

Comment puis-je ajouter automatiquement une barre de défilement verticale à ma div?

Je veux ajouter une barre de défilement verticale à mon <Div>. J'ai essayé overflow:auto, mais cela ne fonctionne pas. J'ai testé mon code dans Firefox et Chrome. Je colle le code de style Div ici:

float:left;
width:1000px;
overflow: auto;
csshtmlscrollbaroverflow
90
jay

Vous devez attribuer une certaine hauteur pour que la propriété overflow: auto; fonctionne.
À des fins de test, ajoutez height: 100px; et vérifiez.
et il sera également préférable de donner overflow-y:auto; au lieu de overflow: auto;, car cela fait que l'élément ne défile que verticalement, mais pas horizontalement.

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

Si vous ne connaissez pas la hauteur du conteneur et que vous souhaitez afficher une barre de défilement verticale lorsque le conteneur atteint une hauteur fixe, par exemple 100px, utilisez max-height au lieu de la propriété height.

Pour plus d'informations, lisez ceci Article MDN .

122
Mr_Green

Vous devez ajouter la propriété 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>
42
DevT

Vous pouvez définir:

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

J'ai un scroller incroyable sur mon div-popup. Pour appliquer, ajoutez ce style à votre élément div:

overflow-y: scroll;
height: XXXpx;

La height que vous spécifiez sera la hauteur du div et une fois si vous avez un contenu supérieur à cette hauteur, vous devez le faire défiler.

Je vous remercie.

12
Ataboy Josef

Je ne suis pas tout à fait sûr de ce que vous essayez d'utiliser la div, mais c'est un exemple avec du texte aléatoire.

Mr_Green a donné les instructions correctes lorsqu'il a dit d'ajouter overflow-y: auto car cela limite le défilement vertical. Voici un exemple JSFiddle:

JSFiddle

9
MitulP91

Pour afficher la barre de défilement verticale dans votre div, vous devez ajouter

height: 100px;   
overflow-y : scroll;

ou

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