How to get all HTML elements 500px below viewport using Javascript

Question

I am trying to get all the HTML elements(div with particular id) which are there 500px below viewport on the page. I want to have this on scroll event.

    var windowHeight = window.outerHeight;
    var gridTop = windowHeight + 500;
    var elements = document.getElementsByClassName('test');
    window.addEventListener('scroll', function () {
        for (let i = 0; i < elements.length; i++) {
            var thisTop = elements[i].offsetTop - document.body.scrollTop;
            if (thisTop >= gridTop) {
                console.log('hi');
            }
        }
    });

I need help on finding elements 500px below viewport.

EDIT: I want to do it with pure JavaScript and I am using above code. But every time I am getting thisTop as 0. Please let me know the approach to do this.

[Check if element is between 30% and 60% of the viewport](//stackoverflow.com/q/29891587) should help to get started. — Tushar, Nov 16 '17 at 06:47
@Tushar the code is in jquery and want in pure Javascript and also it is giving all the images below viewport. — Tavish Aggarwal, Nov 17 '17 at 11:47

dwij · Answer 1 · 2017-11-16T08:57:34.357

1

Check following solution, here I put parent div which is scrollable.

Note- I have put offset of 50px, in order to support the example.

var parent = document.documentElement

var elements = document.getElementsByClassName('test');
var gridTop = parent.clientHeight + 50;

window.addEventListener('scroll', function() {
   var printStr = "";
  for (let i = 0; i < elements.length; i++) {
    var thisTop = elements[i].offsetTop - parent.scrollTop;

    if (thisTop >= gridTop) {
      printStr += " "+elements[i].id     
    }
  }
  console.clear();
  console.log('selected ', printStr);
});

.container div {
  width: 40px;
  height: 70px;
  margin: 5px;
  background-color: red;
  text-align: center;
}

<div class="container">
  <div class="test" id="1">1</div>
  <div class="test" id="2">2</div>
  <div class="test" id="3">3</div>
  <div class="test" id="4">4</div>
  <div class="test" id="5">5</div>
  <div class="test" id="6">6</div>
  <div class="test" id="7">7</div>
  <div class="test" id="8">8</div>
  <div class="test" id="9">9</div>
  <div class="test" id="10">10</div>
  <div class="test" id="11">11</div>
  <div class="test" id="12">12</div>
</div>

edited Nov 16 '17 at 08:57

answered Nov 16 '17 at 08:33

dwij

694
8
17

I want whole of my window to be scrollable so I am adding `var gridTop = window.outerheight + 50;`. Still I am getting `thisTop` as 0. – Tavish Aggarwal Nov 16 '17 at 08:45
I suggest you to wrap your content with a div.(like `
– dwij Nov 16 '17 at 08:51
Yeah! But I don't want to change html. – Tavish Aggarwal Nov 16 '17 at 08:54
you should use `document.documentElement.scrollTop` insted of `document.body.scrollTop` – dwij Nov 16 '17 at 09:00
Thanks really helpful. But element that I have is image and somehow `elements[i].offsetTop` is coming 0 every time. – Tavish Aggarwal Nov 16 '17 at 09:03
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159126/discussion-between-dwij-and-tavish-aggarwal). – dwij Nov 16 '17 at 09:06

score 0 · Answer 2 · answered Nov 16 '17 at 07:40

You should not set multiple elements to have the same ID. It will have a conflict in your js. If you want to identify a set of DIVs, you should use CLASS instead.

Here, what I did was to find all elements classed as some-class-name iterated through the list, Then get their width, both style.width and offsetWidth

    <div id="the_900px_div" class="some-class-name" style="width:900px;border:1px solid blue;"></div>
    <div id="the_200px_div" class="some-class-name" style="width:200px;border:1px solid blue;"></div>
    <div id="the_100px_div" class="some-class-name" style="width:100px;border:1px solid red;"></div>
    <script type="text/javascript">
    function autorun()
    {
        var elements = document.getElementsByClassName('some-class-name');
        var elementsLength = elements.length;
        console.log(elements);
        for (var i = 0; i < elementsLength; i++){
            var sw = elements[i].style.width.replace('px','');
            var ow = elements[i].offsetWidth;
            var id = elements[i].id;
            console.log(sw > 500)
            console.log(id + ' style.width is ' + sw + 'px')
            console.log(ow > 500)
            console.log(id + ' offsetWidth is ' + ow + 'px')
        }
    }
    if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
    else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
    else window.onload = autorun;
    </script>

Is this answer to my question? I need to find elements that are not in viewport. — Tavish Aggarwal, Nov 16 '17 at 08:10
@TavishAggarwal this answer gets all elements regardless if they are inside or outside the viewport... You should check this [How to tell if a DOM element is visible in the current viewport?](https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433) and just negate the condition. — Jaronloch, Nov 16 '17 at 08:24
I need to find elements that are not in view port using pure Javascript. I need elements that are 500px below than viewport. Please look at my edited question. — Tavish Aggarwal, Nov 16 '17 at 08:26

How to get all HTML elements 500px below viewport using Javascript

2 Answers2