可滾動面板捕捉到滾動上的元素

Question

滾動div內部是否有一種方式可以在用戶滾動時捕捉到元素。

例如，如果我們有CSS如

.container { 
    height: 300px; 
    width: 200px; 
    overflow: auto 
} 
li { 
    height: 40px; 
    width: 100 % ; 
} 

和HTML作爲

<div class="container"> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
    <li> 
     test 
    </li> 
</div> 

因此，從該容器應該有一個垂直滾動條。當用戶滾動我希望它，以便當他們停止滾動時，最終滾動位置將容器滾動位置捕捉到顯示的最接近的div。這可能是困難的，因爲safari等瀏覽器也提供動力，所以它必須是滾動結尾的事件。

任何想法，如果這是可能的，以及如何。

非凡

Answer 1

您可以使用setTimeout。這應該工作

var snap_timer; 
var scroll_from_mouse = true; 

function snapList(){ 
    var snapped = false; 
    var i = 0; 
    while(!snapped && i < $('.container li').size()){ 
    var itop = $('.container li').eq(i).position().top; 
    var iheight = $('.container li').eq(i).outerHeight(); 
    if(itop < iheight && itop > 0){ 
     scroll_from_mouse = false; 
     snapped = true; 
     var new_scroll_top = 0; 
     if(iheight - itop > iheight/2) 
     new_scroll_top = $('.container').scrollTop() + itop; 
     else if(i > 1) 
     new_scroll_top = $('.container').scrollTop() - ($('.container li').eq(i-1).outerHeight() - itop); 
     else 
     new_scroll_top = 0; 
     $('.container').scrollTop(new_scroll_top); 
    } 
    i++; 
    } 
}; 

$(function(){ 
    $('.container').scroll(function(){ 
    clearTimeout(snap_timer); 
    if(scroll_from_mouse) snap_timer = setTimeout(snapList, 200); 
    scroll_from_mouse = true; 
    }); 
});