comment puis-je ajouter une barre de défilement verticale pour mon div automatiquement?

Je veux ajouter de la barre de défilement verticale pour mon <Div>. J'ai essayé overflow:auto, mais ça ne fonctionne pas. J'ai testé mon code dans les navigateurs Firefox et Chrome.
Je suis le collage de la Div style code ici:

float:left;
width:1000px;
overflow: auto;
  • un jsfiddle ou plusieurs css avec votre balisage
  • Essayez ceci: overflow-y:scroll et certains taille. Aller à travers ce docs.
  • Grâce Mr_Green pour votre réponse. Mais ce code ne fonctionne pas pour moi.
  • Pour rendre le travail de Défilement, à l'intérieur d'un contenu doivent overflow.
  • Poste ton code html et css ici.
InformationsquelleAutor jay | 2013-08-12
  1. 121

    Vous devez affecter une certaine hauteur pour faire de la overflow: auto; travailler bien.

    Pour objectif de test, ajouter height: 100px; et vérifier.

    et aussi, il sera mieux si vous donnez overflow-y:auto; au lieu de overflow: auto;, parce que cela rend l'élément à défilement vertical, mais pas à l'horizontale.

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

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

    Pour plus d'informations, lisez ce MDN article.

    • Oui, j'ai reçu votre point et testé, il fonctionne très bien sur Chrome mais pas sous FireFox. Un de plus déroutant, c'est la barre de Défilement verticale apparaît sur les temps de chargement de Page dans FF, mais ont disparu lors du chargement d'une page est terminée!
    • "Vous devez affecter une certaine hauteur" exactement mon problème, merci! 😛
    InformationsquelleAutor Mr_Green
  2. 41

    Vous devez ajouter max-height propriété.

    CSS:

    .ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}

    HTML:

    <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>

    • Cela fonctionne parfaitement 😉
    InformationsquelleAutor DevT
  3. 14

    Vous pouvez définir :

    overflow-y: scroll;height: XX px
    • cela a été suggéré par les réponses précédentes.
    InformationsquelleAutor
  4. 11

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

    overflow-y: scroll;
height: XXXpx;

    La height vous spécifiez sera a la hauteur de la div et une fois si vous avez le contenu de dépasser cette hauteur, vous avez à faire défiler.

    Merci.

    InformationsquelleAutor Ataboy Josef
  5. 9

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

    Mr_Green a donné les instructions correctes quand il a dit à ajouter overflow-y: auto que restreint à défilement vertical. C'est un JSFiddle exemple:

    JSFiddle

    • Tout d'abord @Mr_Green votre suggestion fonctionne très bien dans Chrome, mais pas dans FF. Et est-il une option d'ajouter de la Hauteur, parce que je ne peux pas ajouter de la Hauteur à mon Div de ma conception de la structure.
    InformationsquelleAutor MitulP91
  6. 8

    À la barre de défilement vertical dans votre div vous devez ajouter

    height: 100px;   
overflow-y : scroll;

    ou

    height: 100px; 
overflow-y : auto;
    InformationsquelleAutor Ricardo Romo
  7. 2

    CSS:

    ::-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);
}

    • S'il vous plaît ajouter explication de votre réponse
    InformationsquelleAutor GURU PRASAD