web-dev-qa-db-ja.com

divにスクロールバーを追加するにはどうすればよいですか？

いくつかの結果を表示するポップアップがあり、結果が途切れるのでスクロールバーを表示したい（そして、ポップアップが長すぎたくない）。

cssscrollpopup
65
Blankman

style="overflow-y:scroll;"をdivタグに追加する必要があります。 （これにより、垂直にスクロールバーが強制されます）。

必要なときにのみスクロールバーが必要な場合は、overflow-y:auto;を実行します

95
Mitch Dempsey

Cssクラスでスクロール付きのNice Divを使用する

.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

Jqueryを使用してスクロールバーを追加する場合は、次のようにします。 divのIDが「mydiv」の場合、cssプロパティを使用して次のjquery idセレクターを使用できます。

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