我正在使用带有下拉菜单的bootstrap3。我希望列表项可滚动,除了最后一个(在分隔符之后),它总是应该可见并固定在列表的末尾。我目前有以下代码,我的问题是,使用此代码,最后一个元素也是可滚动的,我不知道应该做什么。
我应该在代码中更改什么?
<ul class = "dropdown-menu scrollable-bootstrap-menu">
<li><a href='#'>item1</a></li> //from here
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li> //to here should be scrollable
<li role="separator" class="divider"></li>
<li><a href='#'>View all items</a></li> //should be non scrollable (always visible/fixed)
</ul>
CSS
.scrollable-bootstrap-menu {
height: auto;
max-height: 100px;
overflow-x: hidden;
}
答案 0 :(得分:2)
我知道这样做的唯一方法是在列表中列出一个列表。像这样:
<ul class="dropdown-menu scrollable-bootstrap-menu">
<li>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a href='#'>View all items</a></li>
</ul>
然后设置内部列表一个以在溢出时滚动。
.scrollable-bootstrap-menu ul {
height: auto;
max-height: 50px;
overflow-x: hidden;
}
这是一个演示(没有太多样式,但它有效):
或查看以下完整代码:
.scrollable-bootstrap-menu ul {
height: auto;
max-height: 50px;
overflow-x: hidden;
}
ul {
list-style: none;
padding: 5px 0;
}
<ul class="dropdown-menu scrollable-bootstrap-menu">
<li>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>
<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a href='#'>View all items</a></li>
</ul>
答案 1 :(得分:1)
尝试: 的CSS:
.scrollable-bootstrap-menu {
height: auto;
max-height: 100px;
overflow-x: hidden;
position:relative;
}
.scrollable-bootstrap-menu li:last-child {
position:absolute;
bottom:0;
}
JS:
$('.scrollable-bootstrap-menu').scroll(function(){
$('.scrollable-bootstrap-menu li:last-child').css('bottom',-$(this).scrollTop());
});