10

我需要知道是否有一种方法可以确定 div 是否位于屏幕中央。

HTML：

<div id="container">
 <div class="box" id="box0">
  text
 </div>
 <div class="box" id="box1">
  text
 </div>

 .....

 <div class="box" id="box100">
  text
 </div>
</div>

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

谢谢

4

3 回答 3

10

演示页面

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

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

于 2014-10-20T13:17:09.200 回答
4

这是一个不错的方法：elementFromPoint()

您可以像这样获得中心的元素：

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

//if you want jquery element you can get it.
var jqueryElem = $(elem);
于 2017-07-16T13:36:19.740 回答
2

窗口的高度和窗口的 scrollTop() 将为您提供用户视图中存在的偏移范围：

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

您可以尝试使用视口选择器，例如： http: //www.appelsiini.net/projects/viewport 这将为您提供所有可见元素。不需要插件，但可以简化选择

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

然后，您可以从此选择中查找最接近 middleHeight 的元素：

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

尚未对此进行测试，但它应该是正确的。

于 2012-08-01T14:34:28.357 回答