如何在 div 中添加滚动条？答案

【问题标题】：How do you add a scroll bar to a div?如何在 div 中添加滚动条？
【发布时间】：2011-02-19 16:17:06
【问题描述】：

我有一个显示一些结果的弹出窗口，我希望显示一个滚动条，因为结果被截断了（我不希望弹出窗口太长）。

【问题讨论】：

【解决方案1】：

要添加滚动，您需要定义 div 的 max-height，然后添加 overflow-y

所以做这样的事情

.my_scroll_div{
    overflow-y: auto;
    max-height: 100px;
}

【讨论】：

【解决方案2】：

如果您想使用 jquery 添加滚动条，以下将起作用。如果您的 div 的 id 为“mydiv”，您可以使用以下带有 css 属性的 jquery id 选择器：

jQuery('#mydiv').css("overflow-y", "scroll");

【讨论】：

正确，需要用jquery动态添加。这个对我有用。谢谢
@Chaki_Black 很重要。我在这里 (stackoverflow.com/a/36314963/2512022) 为关于 div 上的动态滚动的问题添加了类似的答案
这个方法有点过时了，即使需要动态选择。现代 DOM 或多或少地弃用了 jQuery。有关补充信息，请参阅 blog.garstasio.com/you-dont-need-jquery/selectors 或任何数量的类似文章。

【解决方案3】：

<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}


</style>
</head>

<body>



<div class="scroll">You can use the overflow property when you want to have better       control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div>


</body>
</html>

【讨论】：

【解决方案4】：

Css 类有一个漂亮的带滚动的 Div

.DivToScroll{   
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
}

.DivWithScroll{
    height:120px;
    overflow:scroll;
    overflow-x:hidden;
}

【讨论】：

【解决方案5】：

<div class="scrollingDiv">foo</div> 

div.scrollingDiv
{
   overflow:scroll;
}

【讨论】：

@webdestroya：它只会向类名为“scrollingDiv”的 div 添加滚动。这可能少至 1，甚至 0，或者与设计师希望拥有滚动条的所有 div 一样多。
@webdestroya：我没碰它。当我发表评论时，帖子并没有显示为正在编辑。 W/e.
@Robusto - 我认为他指的是我编辑了它。因为我确实对其进行了编辑以使其更清晰。
@Robusto - 是的，我的意思是 gmcalab 编辑了它。最初它只是在规范中说div，它没有类。不管怎样，我删除了我的评论，因为它现在已经修复了。

【解决方案6】：

您需要在 div 标签中添加style="overflow-y:scroll;"。（这将强制垂直滚动条）。

如果您只需要在需要时使用滚动条，只需 overflow-y:auto;

【讨论】：