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

Question

我正在嘗試獲取所有HTML元素（具有特定ID的div），這些元素在頁面上的視口下方有500px。 我想在滾動事件上有這個。

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

我需要尋找視口下方500px的元素的幫助。

編輯：我想用純JavaScript做到這一點，我正在使用上面的代碼。 但是，每次將thisTop設為0時，請讓我知道執行此操作的方法。

Answer 1

檢查以下解決方案，在這里我將父div滾動。

注意-為了支持示例，我將偏移量設置為50px。

 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

您不應將多個元素設置為具有相同的ID。 它將在您的js中發生沖突。 如果要標識一組DIV，則應改用CLASS。

在這里，我要做的是找到所有被歸類為some-class-name元素，並通過列表進行迭代，然后獲取它們的寬度，包括style.width和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>