Html 如何自动向我的 div 添加垂直滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18183296/
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 can I add a vertical scrollbar to my div automatically?
提问by jay
I want to add a vertical scrollbar to my <div>. I've tried overflow: auto, but it is not working. I've tested my code in Firefox and Chrome.
我想在我的<div>. 我试过了overflow: auto，但它不起作用。我已经在 Firefox 和 Chrome 中测试了我的代码。
I'm pasting the div style code here:
我在这里粘贴 div 样式代码：
float: left;
width: 1000px;
overflow: auto;
回答by Mr_Green
You need to assign some height to make the overflow: auto;property work.
For testing purpose, add height: 100px;and check.
and also it will be better if you give overflow-y:auto;instead of overflow: auto;, because this makes the element to scroll only vertical but not horizontal.
您需要分配一些高度才能使该overflow: auto;属性正常工作。
出于测试目的，添加height: 100px;并检查。
而且如果你给overflow-y:auto;而不是会更好overflow: auto;，因为这使得元素只能垂直滚动而不是水平滚动。
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
If you don't know the height of the container and you want to show vertical scrollbar when the container reaches a fixed height say 100px, use max-heightinstead of heightproperty.
如果您不知道容器的高度，并且希望在容器达到固定高度时显示垂直滚动条，例如100px，请使用max-height代替height属性。
For more information, read this MDN article.
有关更多信息，请阅读这篇MDN 文章。
回答by DevT
You have to add max-heightproperty.
您必须添加max-height属性。
.ScrollStyle
{
max-height: 150px;
overflow-y: scroll;
}<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>回答by DevT
You can set :
您可以设置：
overflow-y: scroll;height: XX px
回答by Ataboy Josef
I got an amazing scroller on my div-popup. To apply, add this style to your div element:
我的div-popup. 要应用，请将此样式添加到您的 div 元素：
overflow-y: scroll;
height: XXXpx;
The heightyou specify will be the height of the div and once if you have contents to exceed this height, you have to scroll it.
在height您指定将成为div的高度，一旦如果有内容超过这个高度，你必须滚动它。
Thank you.
谢谢你。
回答by Ricardo Romo
To show vertical scroll bar in your div you need to add
要在您的 div 中显示垂直滚动条，您需要添加
height: 100px;
overflow-y : scroll;
or
或者
height: 100px;
overflow-y : auto;
回答by MitulP91
I'm not quite sure what you're attempting to use the div for, but this is an example with some random text.
我不太确定您尝试将 div 用于什么目的，但这是一个带有一些随机文本的示例。
Mr_Green gave the correct instructions when he said to add overflow-y: autoas that restricts it to vertical scrolling. This is a JSFiddle example:
Mr_Green 在说添加时给出了正确的说明，overflow-y: auto因为这将其限制为垂直滚动。这是一个 JSFiddle 示例：
回答by GURU PRASAD
::-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);
}