可滚动面板捕捉到滚动上的元素

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; 
    }); 
});