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

Posted 2023-02-21

技术标签:

【中文标题】如何自动向我的 div 添加垂直滚动条？【英文标题】：How can I add a vertical scrollbar to my div automatically? 【发布时间】：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 代码。 【参考方案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 中显示垂直滚动条，您需要添加