CSS 如何在div中添加滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2836827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you add a scroll bar to a div?
提问by Blankman
I have a popup that displays some results, and I want a scroll bar to be display since the results are being cutt off (and I don't want the popup to be too long).
我有一个显示一些结果的弹出窗口，我希望显示一个滚动条，因为结果被截断了（我不希望弹出窗口太长）。
回答by Mitch Dempsey
You need to add style="overflow-y:scroll;"to the div tag. (This will force a scrollbar on the vertical).
您需要添加style="overflow-y:scroll;"到 div 标签。（这将强制垂直滚动条）。
If you only want a scrollbar when needed, just do overflow-y:auto;
如果您只在需要时想要滚动条，请执行 overflow-y:auto;
回答by Ricardo Lima
Css class to have a nice Div with scroll
CSS 类有一个漂亮的 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;
}
回答by ScottyG
If you want to add a scroll bar using jquery the following will work. If your div had a id of 'mydiv' you could us the following jquery id selector with css property:
如果您想使用 jquery 添加滚动条，以下将起作用。如果您的 div 的 id 为“mydiv”，您可以使用以下带有 css 属性的 jquery id 选择器：
jQuery('#mydiv').css("overflow-y", "scroll");
回答by Gabe
<div class="scrollingDiv">foo</div>
div.scrollingDiv
{
overflow:scroll;
}
回答by Daveontrak
<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>
