Javascript 查找'；在可见屏幕（视口）的中间，滚动

我需要知道是否有办法确定div是否位于屏幕中央

HTML:

文本
文本
.....
文本

考虑到页面是可滚动的，有没有办法确定div何时会出现在可见屏幕的中心？因此，基本上，当用户向下滚动页面时，应该选择可见屏幕中间的div。

---

谢谢

窗口的高度和滚动条（）将为您提供用户视图中存在的偏移范围：

var minHeight = $(window).scrollTop()
var maxHeight = $(window).height()
var middleHeight = (maxHeight + minHeight) / 2;

您可以尝试使用视口选择器，例如： 这将为您提供所有可见元素。不需要插件，但可以简化选择

var visibleElements = $("div.box").filter(":in-viewport")

从该选择中，您可以查找最接近中间高度的图元：

var $midElement;
var distance = null;
var currDistance = 0;
visibleElements.each(function(index, element) {
    currDistance = Math.abs(middleHeight - $midElement.offset().top);
    if ( distance == null || currDistance < distance ) {
        $midElement = $(element);
        distance = currDistance;
    }
});

var$midElement；
var距离=null；
var currDistance=0；
visibleElements.每个（函数（索引、元素）{
currDistance=Math.abs（中间高度-$midElement.offset（）.top）；
if（距离==null | | currdestance

还没有测试过这个，但它应该是沿着正确的轨道

var findMiddleElement=（函数（docElm）{
var viewportHeight=docElm.clientHeight，
//这里我使用预缓存的DIV元素，但是您可以使用任何您想要的东西。
//动态生成元素的情况更需要CPU。
元素=$（'div'）；
返回函数（e）{
var中间元素；
如果（e&&e.type=='resize'）
视口高度=docElm.clientHeight；
元素。每个（函数（）{
var pos=this.getBoundingClientRect（）.top；
//如果一个元素或多或少在视口的中间
如果（位置>视口高度/2.5和位置<视口高度/1.5）{
中间元素=此；
返回false；//停止迭代
}
});
console.log（中间元素）；
}
})（document.documentElement）；
$（窗口）.on（'scroll resize'，findmddleElement）；

另一种方法（仅适用于现代浏览器）是使用

这是一个很好的方法：

可以在中心获得元素，如下所示：

 var elem = document.elementFromPoint($(window).width()/2, $(window).height()/2);

//if you want jquery element you can get it.
var jqueryElem = $(elem);

---

我敢问…你尝试过什么？相关-相关-是否可以添加

onmouseup

和

onmouseudown

事件，以便它也可以在桌面上垂直滑动？@MalenaT-是的，是可能的。你能帮我怎么做或更新你的codepen示例吗？非常感谢你！我不明白你说的垂直滑动是什么意思。

var findMiddleElement = (function(docElm){
    var viewportHeight = docElm.clientHeight,
        // here i'm using pre-cached DIV elements, but you can use anything you want.
        // Cases where elements are generated dynamically are more CPU intense ofc.
        elements = $('div'); 

    return function(e){
        var middleElement;
        if( e && e.type == 'resize' )
            viewportHeight = docElm.clientHeight;

        elements.each(function(){
            var pos = this.getBoundingClientRect().top;
            // if an element is more or less in the middle of the viewport
            if( pos > viewportHeight/2.5 && pos < viewportHeight/1.5 ){
                middleElement = this;
                return false; // stop iteration 
            }
        });

        console.log(middleElement);
    }
})(document.documentElement);

$(window).on('scroll resize', findMiddleElement);

 var elem = document.elementFromPoint($(window).width()/2, $(window).height()/2);

//if you want jquery element you can get it.
var jqueryElem = $(elem);