如何自动向我的 div 添加垂直滚动条？答案

【问题标题】：How can I add a vertical scrollbar to my div automatically?如何自动向我的 div 添加垂直滚动条？
【发布时间】：2013-08-13 13:06:57
【问题描述】：

我想为我的<div> 添加一个垂直滚动条。我试过overflow: auto，但它不起作用。我已经在 Firefox 和 Chrome 中测试了我的代码。

我在这里粘贴 div 样式代码：

float: left;
width: 1000px;
overflow: auto;

【问题讨论】：

带有标记的 jsfiddle 或更多 css
试试这个：overflow-y:scroll 和一些 height。通过这个docs。
感谢格林先生的回复。但是这段代码对我不起作用。
要使 Scroll 正常工作，内部内容应该溢出。
在此处发布您的 html 和 css 代码。

标签： css html scrollbar overflow

【解决方案1】：

从 OS X Lion 开始，网站上的滚动条默认是隐藏的，只有在您开始滚动时才可见。就个人而言，我更喜欢隐藏的滚动条，但如果你真的需要它，你可以覆盖默认值并强制 WebKit 浏览器中的滚动条返回，如下所示：

::-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);
}

【讨论】：

请在您的回答中添加解释
来源（和解释）似乎是：simurai.com/blog/2011/07/26/webkit-scrollbar。

【解决方案2】：

你可以设置：

overflow-y: scroll;height: XX px

【讨论】：

以前的答案已经建议了这一点。

【解决方案3】：

您需要指定一些高度才能使overflow: auto; 属性起作用。
为了测试目的，添加height: 100px;并检查。
而且如果你给overflow-y:auto;而不是overflow: auto;会更好，因为这使得元素只能垂直滚动而不是水平滚动。

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

如果您不知道容器的高度，并且希望在容器达到固定高度时显示垂直滚动条，例如100px，请使用max-height 而不是height 属性。

欲了解更多信息，请阅读此MDN article。

【讨论】：

是的，我明白了你的意思并进行了测试，它在 Chrome 中可以正常工作，但在 FireFox 中却不行。更令人困惑的事情是垂直滚动条出现在 FF 中的页面加载时间，但在页面加载完成时消失了！
“你需要指定一些高度”正是我的问题，谢谢！ :P

【解决方案4】：

我的div-popup 上有一个很棒的滚动条。要应用，请将此样式添加到您的 div 元素：

overflow-y: scroll;
height: XXXpx;

您指定的height 将是 div 的高度，一旦您的内容超过此高度，您必须滚动它。

谢谢。

【讨论】：

【解决方案5】：

您必须添加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>

【讨论】：

【解决方案6】：

要在 div 中显示垂直滚动条，您需要添加

height: 100px;   
overflow-y : scroll;

或

height: 100px; 
overflow-y : auto;

【讨论】：

【解决方案7】：

我不太确定您尝试将 div 用于什么目的，但这是一个带有一些随机文本的示例。

Mr_Green 在说添加 overflow-y: auto 时给出了正确的指示，因为这将其限制为垂直滚动。这是一个 JSFiddle 示例：

JSFiddle

【讨论】：

首先@Mr_Green 您的建议在Chrome 中运行良好，但在FF 中却不行。还有没有添加高度的替代方法，因为我无法为我的设计结构将高度添加到我的 Div 中。