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

110

Je souhaite ajouter une barre de défilement verticale à mon fichier <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;
css html scrollbar overflow geai
la source
un jsfiddle ou plus css avec votre balisage
Ritabrata Gautam
12
Essayez ceci: overflow-y:scrollet une certaine hauteur . Parcourez cette documentation .
Mr_Green
Merci Mr_Green pour votre réponse. Mais ce code ne fonctionne pas pour moi.
jay
Pour que le défilement fonctionne, le contenu interne doit déborder .
Mr_Green
Postez votre code html et css ici.
Mr_Green

Réponses:

145

Vous devez attribuer une certaine hauteur pour que le overflow: auto; propriété fonctionne.
À des fins de test, ajoutez height: 100px;et vérifiez.
et il sera également préférable de donner à la overflow-y:auto;place 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 la barre de défilement verticale lorsque le conteneur atteint une hauteur fixe 100px, par exemple , utilisez max-heightau lieu de heightproperty.

Pour plus d'informations, lisez cet article MDN .

Monsieur green
la source
Oui, j'ai compris votre point et testé, cela fonctionne bien dans Chrome mais pas dans FireFox. Une autre chose déroutante est que la barre de défilement verticale apparaît au moment du chargement de la page dans FF mais a disparu lorsque le chargement de la page est terminé!
jay
"Vous devez attribuer une certaine hauteur" exactement mon problème, merci! : P
Wagner da Silva
51

Vous devez ajouter une max-heightpropriété.

.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>
Développer l'extrait

DevT
la source
20

Vous pouvez définir:

overflow-y: scroll;height: XX px

la source
2
cela a été suggéré par les réponses précédentes.
UmNyobe
15

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

overflow-y: scroll;
height: XXXpx;

Le que heightvous spécifiez sera la hauteur du div et une fois si vous avez du contenu pour dépasser cette hauteur, vous devez le faire défiler.

Je vous remercie.

Ataboy Josef
la source
13

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;
Ricardo Romo
la source
10

Je ne sais pas trop pourquoi vous essayez d'utiliser le div, mais ceci est un exemple avec du texte aléatoire.

Mr_Green a donné les instructions correctes quand il a dit d'ajouter overflow-y: autocar cela le restreint au défilement vertical. Voici un exemple JSFiddle:

JSFiddle

MitulP91
la source
Tout d'abord @Mr_Green votre suggestion fonctionne bien dans Chrome mais pas dans FF. Et y a-t-il une alternative à l'ajout de Hauteur, car je ne peux pas ajouter de Hauteur à ma Div pour ma structure de conception.
jay
2 

::-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);
}
Développer l'extrait

GURU PRASAD
la source
2
Veuillez ajouter une explication à votre réponse
Mastisa
la source (et l'explication) semble être: simurai.com/blog/2011/07/26/webkit-scrollbar .
cobberboy