14

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

4

3 Answers 3

12

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

8
  • Is it possible to add onmouseup and onmousedown events so it can also be swipe-able vertically on desktop?
    – Malena T
    Mar 23, 2019 at 12:15
  • @MalenaT - Yes, it is possible.
    – vsync
    Mar 23, 2019 at 15:23
  • Could you please help me how to do it or update your codepen example? Thank you so much!
    – Malena T
    Mar 23, 2019 at 16:24
  • I don't understand what do you mean by swipe-able vertically
    – vsync
    Mar 23, 2019 at 18:13
  • Like this.
    – Malena T
    Mar 23, 2019 at 20:43
6

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.