如何使用Javascript在视口下方获取所有500px的HTML元素

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.

Answer 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> 

Answer 2

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>