[英]How to Scroll a bootstrap dropdown-menu programatically
I'm using a bootstrap dropdown-menu to show a big list of years. 我正在使用bootstrap下拉菜单来显示多年的重要列表。 I need to scroll down the list so the
<li>
element is shown in the top. 我需要向下滚动列表,以便
<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>
So the current/default behavior is that the first element appears in the top of the dropdown list, which is 2014. If I want, let's say the fifth element (2010) to be display in the top by default, how can I programmatically make the dropdown scroll until that element is in the top? 所以当前/默认行为是第一个元素出现在下拉列表的顶部,即2014年。如果我想,假设第五个元素(2010)默认显示在顶部,我怎么能以编程方式制作下拉滚动,直到该元素位于顶部?
Normally the Bootstrap dropdown doesn't scroll so I assume you have changed the CSS to make the .dropdown
scroll using overflow-x
and setting a specific height. 通常,Bootstrap下拉列表不会滚动,因此我假设您已更改CSS以使用
overflow-x
进行.dropdown
滚动并设置特定高度。
If so, you can do something like this.. 如果是这样,你可以做这样的事情..
$('#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);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.