web-dev-qa-db-fra.com

Comment ajoutez-vous une barre de défilement à une div?

J'ai une fenêtre contextuelle qui affiche des résultats et je souhaite afficher une barre de défilement car les résultats sont coupés (et je ne veux pas que la fenêtre contextuelle soit trop longue).

cssscrollpopup
65
Blankman

Vous devez ajouter style="overflow-y:scroll;" à la balise div. (Cela forcera une barre de défilement sur la verticale).

Si vous voulez seulement une barre de défilement en cas de besoin, faites simplement overflow-y:auto;

95
Mitch Dempsey

Css classe pour avoir une belle div avec défilement

.DivToScroll{   
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
}

.DivWithScroll{
    height:120px;
    overflow:scroll;
    overflow-x:hidden;
}
17
Ricardo Lima

Si vous souhaitez ajouter une barre de défilement à l'aide de jQuery, ce qui suit fonctionnera. Si votre div avait un identifiant de 'mydiv', vous pouvez nous utiliser le sélecteur d'identifiant jquery suivant avec la propriété css:

jQuery('#mydiv').css("overflow-y", "scroll");
11
ScottyG
<div class="scrollingDiv">foo</div> 

div.scrollingDiv
{
   overflow:scroll;
}
6
Gabe
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}


</style>
</head>

<body>



<div class="scroll">You can use the overflow property when you want to have better       control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div>


</body>
</html>
3
Daveontrak