您可以只是有一個css規則來定義，爲dropdown-menu。
.dropdown-menu{
max-height: 300px; /*Provide height in pixels or in other units as per your layout*/
overflow-y: auto; /*Provide an auto overflow to diaply scroll*/
}
Plnkr
或一般你可能希望應用程序有自己的風格的下拉列表，在這種情況下，添加自定義類和規則的下拉菜單中（這樣你的網站看起來並不像自舉網址:)）的例子： -
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [];
for(i=0; i<100; i++){
$scope.items.push("val_" + i);
}
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
}
.btn-group.myapp-select .btn.dropdown-toggle{
color:blue;
background:#cecece;
border-radius:2px;
}
.btn-group.myapp-select.open .btn.dropdown-toggle{
background-color: #afafaf;
font-weight: bold;
}
.myapp-select > ul.dropdown-menu{
max-height: 300px;
overflow-y: auto;
border-radius:2px;
}
.myapp-select > ul.dropdown-menu > li{
color:blue;
background:#cecece;
}
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.btn-group.myapp-select .btn.dropdown-toggle{
color:blue;
background:#cecece;
border-radius:2px;
}
.btn-group.myapp-select.open .btn.dropdown-toggle{
background-color: #afafaf;
font-weight: bold;
}
.myapp-select > ul.dropdown-menu{
max-height: 300px;
overflow-y: auto;
border-radius:2px;
}
.myapp-select > ul.dropdown-menu > li{
color:blue;
background:#cecece;
}
</style>
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group myapp-select" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items"><a href="#">{{item}}</a></li>
</ul>
</div>
</div>
</body>
</html>
來源
2014-09-21 14:40:01
PSL
很簡單（誰知道如何:)） – 2014-09-21 14:42:36
這個答案非常有幫助，但我遇到了一個問題，獲得ul元素的高度（'$（dropdownContainer.nodeName）.find（'。dropdown-menu' ）.outerHeight（）'）總是等於最大高度，即使沒有足夠的li來填充空間並觸發滾動條。任何想法爲什麼？ – Ellesedil 2015-10-10 05:55:21
@PSL如何停止背景滾動？ – Shiva 2017-05-16 10:53:07