引导程序可滚动的下拉菜单，分隔符后的最后一个元素固定

Question

我正在使用带有下拉菜单的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;
}

Answer 1

我知道要执行此操作的唯一方法是在列表中包含一个列表。 像这样：

<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> 

Answer 2

试试：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());

});

https://jsfiddle.net/vyLk778k/1/