如何将滚动条添加到div？

76

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

css scroll popup

— 布兰克曼
source

109

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

如果仅在需要时才需要滚动条，请执行 overflow-y:auto;

— 米奇·登普西
source

21

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

— 里卡多·利马
source

14

如果要使用jquery添加滚动条，则可以使用以下内容。如果您的div的ID为'mydiv'，则可以使用具有CSS属性的以下jquery id选择器：

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

— 斯科蒂
source

1

这是正确的，需要在其中使用jquery进行动态添加。这个对我有用。谢谢

— Chaki_Black

@Chaki_Black很棒。我添加了一个类似的回答有关动态滚动的问题上一个div这里（stackoverflow.com/a/36314963/2512022）

— ScottyG

即使需要动态选择，此方法也有些过时。现代DOM或多或少已弃用jQuery。有关补充信息，请参见blog.garstasio.com/you-dont-need-jquery/selectors或任何数量的类似文章。

— Furkan Toprak

7

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

div.scrollingDiv
{
   overflow:scroll;
}

— 加布
source

@webdestroya：它只会将滚动添加到类名称为“ scrollingDiv”的div中。可能只有1个，甚至是0个，或者是设计人员希望具有滚动条的所有div数量之多。

— 罗布斯托

@webdestroya：我没碰。当我发表评论时，帖子未显示为正在编辑。我们。

— 罗布斯托

@Robusto-我认为他指的是我对其进行编辑。因为我确实对其进行了编辑以使其更加清晰。

— 加布

@Robusto-是的，我是说gmcalab编辑了它。最初它只是div在规范中说过，它没有课程。无论哪种方式，我都删除了我的评论，因为它现已修复。

— 米奇·登普西

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>

— 达文特拉克
source

1

要添加滚动，您需要定义div的最大高度，然后添加溢出-y

所以做这样的事情

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

— 用户名
source