javascript - 如何以编程方式滚动 Bootstrap 下拉菜单

Question

我正在使用 Bootstrap 下拉菜单来显示一个大的年份列表。我需要向下滚动列表以便 <li>元素显示在顶部。

<div id="year-picker" class="dropdown dropdown-lg">
    <a href="#" class="dropdown-toggle left" data-toggle="dropdown"><i></i>Year</a>
    <ul class="dropdown-menu">
        <li th:each="year : ${yearsList}"><a href="#" th:text="${year}"></a></li>
    </ul>
</div>

所以当前/默认行为是第一个元素出现在下拉列表的顶部，即 2014。如果我想要，假设第五个元素 (2010) 默认显示在顶部，怎么可能我以编程方式使下拉列表滚动，直到该元素位于顶部？

Answer 1

通常 Bootstrap 下拉菜单不会滚动，所以我假设您已经更改了 CSS 以使用 overflow-x 并设置特定高度来使 .dropdown 滚动。

如果是这样，你可以做这样的事情..

$('#year-picker').on('shown.bs.dropdown', function () {
  var ele = $(this).find("li>a:contains('2009')");
  var posi = ele.offset().top-ele.innerHeight();
  $('.dropdown-menu').animate({
        scrollTop: posi
    }, 1000);
})

http://bootply.com/130603