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:

text

Solution 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

Solution 2:

This is nice method: elementFromPoint()

You can get the element in the center as so:

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

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

Solution 3:

The height of the window and the scrollTop() of the window will give you the range of offsets that exist in the users view:

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

You could try using a viewport selector such as: http://www.appelsiini.net/projects/viewport This will give you all visible elements. A plugin isn't needed but will ease the selection

Baca Juga

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

From this selection you can then look for the element closest to the 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;
    }
});

Haven't tested this but it should be along the right track.

JavaScript Square

Find Element That's On The Middle Of The Visible Screen (viewport), On Scroll

Solution 1:

DEMO PAGE

Solution 2:

Solution 3:

Post a Comment for "Find Element That's On The Middle Of The Visible Screen (viewport), On Scroll"