jquery - 在固定位置元素内显示滚动条

Question

我在一个 div (#block_list) 中有元素 (.block)。 #block_list 的父级是另一个具有固定位置的 div (#block_list-wrapper)。现在因为 #block_list-wrapper 有固定的位置，#block_list 的一些元素没有显示。我想使用滚动条显示它们。

html:

<div id="block_list-wrapper">
    <div id="handle-wrapper">
        <div id="handle">
            <i class="fa fa-chevron-right"></i>
            <i class="fa fa-chevron-left"></i>
        </div>
    </div>
    <div id="block_list">
        <div class="one_column_block-1 block">
            <img src="static/image/one_column_block-1.png">
        </div>
        <div class="one_column_block-2 block">
            <img src="static/image/one_column_block-2.png">
        </div>
        ...
        ...
        ...
        <div class="one_column_block-1 block">
            <img src="static/image/four_column_block-3.png">
        </div>
    </div>
</div>

代码演示 codepen.io

我试过像这样添加overflow: scroll，

#block_list-wrapper #block_list {
    width: 250px;
    overflow: scroll;
}

但这也没有帮助。

如何显示滚动条以显示 #block_list 中的所有元素 (.block)？

Answer 1

添加下面一行代码来设置元素的高度:

$("#block_list").css("height", $(window).height())

Updated CodePen

另一种解决方案显然是使用 CSS 来实现，就像其他答案所说的那样。