如何将垂直滚动条自动添加到div？

110

我想在其中添加垂直滚动条<div>。我已经尝试过overflow: auto，但是没有用。我已经在Firefox和Chrome中测试了我的代码。

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

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

— 杰伊
source

带有标记的jsfiddle或更多CSS

— Ritabrata Gautam 2013年

12

试试这个：overflow-y:scroll和一些高度。查看此文档。

— Mr_Green

感谢Mr_Green的回复。但是这段代码对我不起作用。

— 2013年

要使Scroll正常工作，内部内容应该溢出。

— Mr_Green 2013年

在此处发布您的html和CSS代码。

— Mr_Green

145

您需要分配一些高度以使overflow: auto;属性起作用。
出于测试目的，添加height: 100px;并检查。
如果您提供overflow-y:auto;而不是，则效果会更好overflow: auto;，因为这会使元素仅垂直滚动而不是水平滚动。

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

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

有关更多信息，请阅读此MDN文章。

— 格林先生
source

是的，我理解了您的观点并进行了测试，它在Chrome中可以正常运行，但在FireFox中却不能。另一个令人困惑的事情是，垂直滚动条出现在FF中的页面加载时间上，但是在页面加载完成时消失了！

— 2013年

“您需要分配一些高度”正是我的问题，谢谢！：P

— Wagner da Silva'Nov

51

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

展开摘要

— 开发工具
source

20

您可以设置：

overflow-y: scroll;height: XX px

2

以前的答案已经暗示了这一点。

— UmNyobe 2015年

14

我的键盘上有一个了不起的滚动器div-popup。要应用，请将此样式添加到div元素中：

overflow-y: scroll;
height: XXXpx;

在height您指定将成为div的高度，一旦如果有内容超过这个高度，你必须滚动它。

谢谢。

— 阿塔伯·约瑟夫（Ataboy Josef）
source

13

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

height: 100px;   
overflow-y : scroll;

要么

height: 100px; 
overflow-y : auto;

— 里卡多·罗莫（Ricardo Romo）
source

10

我不太确定您要使用div做什么，但这是带有一些随机文本的示例。

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

JSFiddle

— 米图P91
source

首先，@ Mr_Green您的建议在Chrome浏览器中效果很好，但在FF中效果不佳。还有添加高度的任何选择，因为我无法为我的设计结构将高度添加到我的Div中。

— 2013年

2

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

展开摘要

— 古拉·普拉萨德
source

2

请在回答中添加解释

— -Mastisa

来源（和解释）似乎是：simurai.com/blog/2011/07/26/webkit-scrollbar。

— cobberboy