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都高于中间或者因为它们位于可见视图之外的窗口的上部而不可见，所以我得到最底部的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

在滚动事件中，您可以获得sreen的中间部分，然后循环您要检查的元素并获取每个位置并找到最接近屏幕中间的位置

 $(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

Answer 2

你可以使用document.elementFromPoint给它设置屏幕中间的x和y坐标

document.addEventListener("scroll", function(){
  let x = window.innerWidth / 2;
  let y = window.innerHeight / 2;
  let element = document.elementFromPoint(x, y);
  let page = element.getAttribute("data-page");
  document.querySelector(".middle") &&   document.querySelector(".middle").classList.remove("middle");
  element.classList.add("middle"); 
})

详细了解document.elementFromPoint

这是一个Codepen example

在jQuery中使元素更接近屏幕中间

2 个答案: