滚动导航栏（Bootstrap 3），但保持页面的其余部分不变

Question

我有一个关于在分隔线中滚动但保持页面其余部分不动的问题。想象一下（因为我刚刚创建了这个帐户，无法发布任何图片。）：帖子由 3 个组件组成：

• 导航栏：不用担心这个。

• 侧边菜单：这是我要滚动浏览的部分，因为它包含 40 个元素，无法在一页上显示。

• 内容：我希望这个也滚动，但我不希望它与侧边菜单同时滚动。

这是我正在谈论的部分的代码：

<div class="panel panel-primary fullheight" ng-controller="NavCtrl">
<div class="panel-heading">All branches</div>
<div class="panel-body">
        <ul class="nav nav-pills nav-stacked">
            <li><input ng-model="search" class="centerhorizontal fullwidth" placeholder="Filter"></li>
            <hr>
            <li ng-repeat="branch in branches | filter: search"><a href="#" class="list-group-item">{{branch}}</a></li>
        </ul>
    </div>
</div>

任何建议都会非常有用！

Answer 1

设置一个溢出-y的css规则：在你想要滚动的div上滚动 例如

#scrollable-area{
   overflow-y: scroll;
   height: 300px;
}

这是一个 JSFiddle 演示。