如何以编程方式滚动引导下拉菜单答案

【问题标题】：How to Scroll a bootstrap dropdown-menu programatically如何以编程方式滚动引导下拉菜单
【发布时间】：2014-04-16 15:48:29
【问题描述】：

我正在使用引导下拉菜单来显示大量年份列表。我需要向下滚动列表，以便 <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）默认显示在顶部，怎么能我以编程方式使下拉菜单滚动直到该元素位于顶部？

【问题讨论】：

您可以使用 ScrollTop 移动（滚动）到第五个 (2010) 元素的偏移量。这甚至会在打开下拉菜单时触发，您可以监听并检测它是否 .is(':visible')

标签： javascript jquery twitter-bootstrap thymeleaf

【解决方案1】：

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

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

$('#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

【讨论】：

绝对是我正在寻找的答案。
唯一的问题是元素的偏移量是可变的并且导致了奇怪的行为（你可以在你的演示中看到它）。但由于我只需要查找 n 元素，因此我将 'posi' 计算为 ele.innerHeight() * n.