javascript - 在 jQuery 中获取靠近屏幕中间的元素

Question

我在页面中有一个项目 div 列表。

例子:

<div data-page='1' class'item' ></div>
<div data-page='1' class'item' ></div>
<div data-page='1' class'item' ></div>
<div data-page='2' class'item' ></div>
<div data-page='2' class'item' ></div>
<div data-page='2' class'item' ></div>
<div data-page='3' class'item' ></div>
<div data-page='3' class'item' ></div>
<div data-page='3' class'item' ></div>

我需要找出屏幕最中心部分的元素并获取其 data-page 编号。

如果所有的 div 都靠近页面的按钮或因为它在页面下方而不可见，我得到最上面的一个因为它更靠近中间，如果所有的 div 都在中间以上或不可见因为它们位于可见 View 之外的窗口的上部，我得到最底部的 div，因为它更靠近中间。

我尝试过的(source):

$(".item").sort(function(a,b){
      return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - 
             Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top))
    })[0].css("background", "red");

上述功能对我不起作用，因为它以红色突出显示了最底部的元素。

我如何在 jQuery 中做到这一点，并在我垂直滚动页面时连续报告最近的页面。

Answer 1

在scroll事件上，你可以获取到屏幕中间，然后循环你要检查的元素，获取它们的每一个位置，找到离屏幕中间最近的那个

 $(function(){
    $(window).scroll(function(){        
        // get the scroll position of the document + half the window height
        var scrollTop = $(document).scrollTop() + ($(window).height() / 2);
        var positions = [];

        // push each of the items we want to check against to an array with their position and selector
        $('.item').each(function(){
            $(this).removeClass("active");
            positions.push({position:$(this).position().top, element: $(this)});
        });

        var getClosest = closest(positions,scrollTop);
        getClosest.addClass("active"); // the element closest to the middle of the screen
        console.log( getClosest.attr("data-page") );
    });

    // finds the nearest position (from an array of objects) to the specified number
    function closest(array, number) {
        var num = 0;
        for (var i = array.length - 1; i >= 0; i--) {
            if(Math.abs(number - array[i].position) < Math.abs(number - array[num].position)){
                num = i;
            }
        }
        return array[num].element;
    }        
});

这是一个working example