javascript div滚动条没有出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16220850/
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
div scrollbar not appearing
提问by Alex Pritchard
I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.
我很少使用 css，但我认为以下内容应该创建一个可滚动区域。相反，它似乎只是隐藏了所有不适合但无法滚动的文本。chrome/ie/firefox 中的行为似乎相同，所以我猜我只是做错了什么。
index.html
索引.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Foo</title>
</head>
<body>
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
</div>
</body>
</html>
style.css
样式文件
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: hidden;
}
回答by VisioN
You should explicitly set overflowto auto(or to scrollif you need scrollbars appear all the time):
您应该明确设置overflow为auto（或者scroll如果您需要一直出现滚动条）：
.scroll-area {
overflow: auto;
}
回答by adrift
Well you're using overflow-stylewhich isn't supported in any major browser yet ..
好吧，您正在使用的overflow-style任何主要浏览器尚不支持..
Setting overflowto auto or scroll on .scroll-areawill have the vertical scrollbar appear as expected
设置overflow为自动或滚动.scroll-area将使垂直滚动条按预期显示
回答by ajtrichards
Your hiding the scroll bar with overflow: hidden;.
你用 隐藏滚动条overflow: hidden;。
If you change to:
如果您更改为：
.scroll-area {
overflow-style: auto;
overflow: auto;
}
回答by Bartek Bielawa
HTML
HTML
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>
CSS
CSS
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: scroll;
}
DEMO
演示
http://jsfiddle.net/YxsLc/1/
EXPLANATION
解释
If You want to scroll content in html elements You should use property overflow: scroll;
如果您想滚动 html 元素中的内容，您应该使用 property overflow: scroll;
Goodluck in future code.
祝你未来的代码好运。
回答by Foreign Object
You need to set overflow: autoor if you just want the y-axis to scroll overflow-y: auto; overflow-x: hidden;
您需要设置overflow: auto或者如果您只想让 y 轴滚动overflow-y: auto; overflow-x: hidden；
回答by Cory Shaw
Your div should have this overflow styling for vertical scrolling:
您的 div 应该具有用于垂直滚动的溢出样式：
.scroll-area {
overflow-y: scroll;
}
Or if you want to scroll horizontal:
或者，如果您想水平滚动：
.scroll-area {
overflow-x: scroll;
}
