如何以編程方式滾動引導程序下拉菜單

我正在使用引導程序下拉菜單顯示一個大的列表。我需要向下滾動列表，以便i元素顯示在頂部。如何以編程方式滾動引導程序下拉菜單

<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）是在頂部的顯示器默認情況下，如何以編程方式進行下拉滾動，直到該元素位於頂部？

來源

2014-04-16 AntonioOtero

你可以使用scrollTop的移動（滾動）到第五（2010年）元素的偏移。這甚至會在打開下拉菜單時觸發，您可以監聽並檢測是否.is（'：visible'） –

正常情況下，引導下拉列表不滾動，所以我假設你已經更改了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

來源

2014-04-16 17:17:58 ZimSystem

絕對是我正在尋找的答案。 – AntonioOtero

唯一的問題是元素的偏移是可變的，並導致了怪異的行爲（你可以在你的演示中看到它）。但是因爲我只需要尋找n元素，所以我計算'posi'爲ele.innerHeight（）* n。 – AntonioOtero

如何以編程方式滾動引導程序下拉菜單

回答

相關問題