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做，我正在使用上面的代码。但是每次我将这个顶部变为0.请让我知道这样做的方法。

Answer 1

检查以下解决方案，这里我放了可滚动的父div。

注意 - 为了支持这个例子，我已经放置了50px的偏移量。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何使用Javascript将所有HTML元素放在视口下方500px

2 个答案: