Find element that's on the middle of the visible screen (viewport), on scroll

Question

I need to know if there is a way I can determine if a div is in the center of the screen.

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>

Is there a way to determine when a div will be in the center of the visible screen, considering that the page is scrollable? So basically, when the user is scrolling down the page, the div that's in the middle of the visible screen should be selected.

Thanks

Answer 1

DEMO PAGE

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

Another way (for modern browsers only) is to use the intersection API