将 Bootstrap 下拉选择滚动条居中到所选项目答案

【问题标题】：Center a Bootstrap drop-down select scroll bar to the selected item将 Bootstrap 下拉选择滚动条居中到所选项目
【发布时间】：2015-04-21 03:17:25
【问题描述】：

这是一个关于如何center a <select> scroll bar to the selected item的问题。

我想找到一种方法来对 Bootstrap 下拉菜单执行相同的操作，以便菜单自动滚动到 .active 列表项。

这里有一些代码：

<ul>
  <li class="dropdown switch">
    <a href="active" class="dropdown-toggle" data-toggle="dropdown" id="switch-a">
      <span>Name</span>
    </a>
    <ul class="dropdown-menu switch-items" id="switch-dd">
      <li>...</li>
      <li>...</li>
      <li class="active active-dd"></li>
      .
      .
      .
      <li>...</li>
    </ul>
  </li>
</ul>

这可能吗，还是我必须使用 HTML <select> 并花时间对其进行样式设置？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap drop-down-menu

【解决方案1】：

不仅有可能，而且处理原生 HTML 对象实际上比处理 <select> 元素样式的奥秘和不一致要容易得多。

您只需用shown.bs.dropdown 收听dropdown open event。
打开后，只需找到唯一的 .active 项目并调用 .focus() 即可将其显示出来。

像这样：

$(".dropdown").on("shown.bs.dropdown", function() {
   $(this).find(".dropdown-menu li.active a").focus()
});

堆栈片段中的演示：

$(".dropdown.focus-active").on("shown.bs.dropdown", function() {
   $(this).find(".dropdown-menu li.active a").focus()
});

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container" >

  <div class="dropdown focus-active">
    <a href="#" class="btn btn-primary"
       data-target="#"  data-toggle="dropdown" 
       aria-haspopup="true" role="button" aria-expanded="false">
      Dropdown trigger
      <span class="caret"></span>
    </a>

    <ul class="dropdown-menu scrollable-menu" role="menu" aria-labelledby="dLabel">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 6</a></li>
      <li><a href="#">Item 7</a></li>
      <li><a href="#">Item 8</a></li>
      <li class="active"><a href="#">Item 9</a></li>
      <li><a href="#">Item 10</a></li>
      <li><a href="#">Item 11</a></li>
      <li><a href="#">Item 12</a></li>      
    </ul>
  </div>

</div>

【讨论】：

【解决方案2】：

没有 jquery 的事件处理程序：

const activeOptionCollection = document.getElementsByClassName('active');
  if (activeOptionCollection.length > 0) {
    const [activeOption] = activeOptionCollection;
    activeOption.scrollIntoView();
  }

【讨论】：