Question

我想在我的<Div>添加垂直滚动条。我试过了overflow:auto，但它没有用。我在Firefox和Chrome中测试了我的代码。我在这里粘贴Div样式代码：

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

Answer 1

您需要指定一些高度以使overflow: auto;属性有效。
出于测试目的，添加height: 100px;并检查。
如果你给overflow-y:auto;代替overflow: auto;会更好，因为这会使元素只滚动而不是水平。

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

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

有关详情，请参阅此MDN article。

Answer 2

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

Answer 3

您可以设置：

overflow-y: scroll;height: XX px

Answer 4

我的div-popup上有一个惊人的卷轴。要应用，请将此样式添加到div元素：

overflow-y: scroll;
height: XXXpx;

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

谢谢。

Answer 5

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

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

JSFiddle

Answer 6

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

height: 100px;   
overflow-y : scroll;

或

height: 100px; 
overflow-y : auto;

Answer 7

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

如何自动为我的div添加垂直滚动条？

7 个答案: