Question

我有以下场景，我需要使DIV可滚动。与我发生的事情是，当我尝试不同的解决方案使其可滚动时，整个DIV集变得可滚动。我想在这里做的只是使最后一个DIV可滚动。

<div class="container">first</div>
<div class="container">second</div>
<div class="container">
    <div id="notSoLong">Don't scroll this!!!!</div>
    <div id="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut placerat ipsum. Integer mollis magna sapien, nec fermentum justo volutpat dapibus. In eget pretium enim. Scroll this!!!</div>
</div>

.container {
    width:100%;
    height:auto;
    min-height:100px;
}

#long {
    width:200%;
    overflow-x:auto;
}

Answer 1

您应该将overflow:auto;添加到.container。或者，如果您希望仅滚动.long，则应将其与其他元素一起包装并将其设置为overflow:auto

Answer 2

要使div可滚动，您必须修复高度。然后溢出属性将工作。并且对于要使可滚动的Last div，您可以在css中使用带有类名的“：last”选择器

Answer 3

您可以通过 CSS选择器来完成。

例如：

.container:last-child {
    overflow-x:scroll; /* You can use 'auto' too, for showing Scrollbars when needed.
}

另一种方法是 jQuery / JavaScript 。

例如：

$(function(){
    $("#long").attr(style="overflow-x:scroll;");
});

检查jsFiddle

最后一个DIV仅可滚动

3 个答案: