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

Dare I ask...what have you tried? – Ohgodwhy Aug 01 '12 at 14:02 — Ohgodwhy, Aug 01 '12 at 14:02
related - https://stackoverflow.com/q/123999/104380 – vsync Aug 10 '17 at 14:59 — vsync, Aug 10 '17 at 14:59
related - https://stackoverflow.com/q/487073/104380 – vsync Aug 10 '17 at 14:59 — vsync, Aug 10 '17 at 14:59

vsync · Answer 1 · 2018-10-25T14:53:20.267

9

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

edited Oct 25 '18 at 14:53

answered Oct 20 '14 at 13:17

vsync

87,559
45
247
317

Is it possible to add `onmouseup` and `onmousedown` events so it can also be swipe-able vertically on desktop? – Malena T Mar 23 '19 at 12:15
@MalenaT - Yes, it is possible. – vsync Mar 23 '19 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 '19 at 16:24
I don't understand what do you mean by *swipe-able vertically* – vsync Mar 23 '19 at 18:13
[Like this](https://www.jqueryscript.net/demo/iOS-7-Style-jQuery-3D-Animated-Value-Selector-Drumjs/examples/). – Malena T Mar 23 '19 at 20:43
Sorry but I currently don't have the time – vsync Mar 24 '19 at 09:07
Thanks anyway. I need it asap. Can you please maybe give some clues how to do it so I can try to implement it? – Malena T Mar 24 '19 at 14:25
@MalenaT - I still don't understand what exactly you want. the picture did not explain it – vsync Mar 24 '19 at 19:13

score 3 · Answer 2 · answered Jul 16 '17 at 13:36

3

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

answered Jul 16 '17 at 13:36

David Novák

1,150
2
12
25

score 2 · Answer 3 · edited Dec 11 '13 at 16:17

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.

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

HTML:

3 Answers3

DEMO PAGE

Linked