如何给一个div添加滚动条？

Question

如何给一个div添加滚动条？

cssscrollpopup

113

我有一个弹出框显示一些结果，由于这些结果被裁剪了，我希望显示一个滚动条（而且我不想让弹出框太长）。

- Blankman

9个回答

31

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

- Ricardo Lima

我不确定为什么这里有两个div。这重要吗？ - David Spector

26

要添加滚动条，您需要定义

标签的max-height属性，然后添加overflow-y属性。

因此，请执行以下操作：

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

- user889030

当我尝试这样做时，我得到的行为和overflow-y: hidden一样。可能出了什么问题？ - David Spector

@DavidSpector 也许CSS被其他地方覆盖了。尝试在末尾添加!important，然后尝试使用.my_scroll_div{ overflow-y: auto !important; max-height: 100px !important; }。 - undefined

15

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

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

- ScottyG

1

这是正确的，需要使用jQuery动态添加它。对我很有效。谢谢。 - Chaki_Black

@Chaki_Black 很好的观点。我在这里添加了一个类似的答案，关于 div 上的动态滚动问题 (http://stackoverflow.com/a/36314963/2512022)。 - ScottyG

这种方法有点过时了，即使需要动态选择。现代DOM已经或多或少地弃用了jQuery。请参阅https://blog.garstasio.com/you-dont-need-jquery/selectors/或任何类似文章以获取补充信息。 - Furkan Toprak

8

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

div.scrollingDiv
{
   overflow:scroll;
}

- Gabe

@Webdestroya：它只会为类名为“scrollingDiv”的div添加滚动条。这可能只有1个，甚至没有，或者是设计师希望拥有滚动条的所有div。 - Robusto

@Webdestroya：我没碰它。而且当我评论时，帖子没有显示为已编辑。随便。 - Robusto

@Robusto - 我想他指的是我编辑了它。因为我编辑过它，使其更加清晰明了。 - Gabe

@Robusto - 是的，我指的是gmcalab编辑了它。最初规范中只是说“div”，没有类。无论如何，我删除了我的评论，因为现在已经修复了。 - Mitch Dempsey

4

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

- Daveontrak

1

如果您有一个CSS文件，可以为<div>元素定义一个调用并分配overflow: auto CSS属性。

在HTML文件中：<div class="container"> 在CSS文件中，您可以写入以下内容：

.container{
    overflow: "auto";
}

- Braulio Livio

1

有多种方法可以在div上实现滚动条，这里提供一种简单的易于操作的方法，附带简单易懂的解释。

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

这里是上述代码的一些解释。

overflow-y: auto;

CSS的overflow-y属性在需要时添加滚动条，如果我们想在特定高度（例如，在我们的情况下为100px）之后添加滚动条，则需要使用：

max-height: 100px;

我们添加CSS的max-height属性，例如要在高度100px之后添加滚动条，则使用max-height: 100px;。

希望这个解释有助于澄清概念。

- Shamiq

0

<html>
<head>
    <style>
        div.scroll {
            max-height: 50px;
            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>

- KARTHIKEYAN.A

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mitch Dempsey · Accepted Answer

您需要向 div 标签添加 style="overflow-y:scroll;"。 (这会强制在垂直方向上出现滚动条)。

如果只想在需要时显示滚动条，可以使用 overflow-y:auto;。