javascript - 我的脚本没有显示真正可见的元素

Question

我找到了有关如何执行此类操作的帖子和在线文章，但大多数示例都不是纯 JavaScript 语言。因此，如果所有部分的高度都相同(例如 220px)，则此脚本几乎可以完美运行。所以我认为我越来越接近让这个脚本按照我希望的方式工作，就像加类一样，但后来我意识到

当我决定更改部分高度并更多地尝试代码以查看它是否有任何我不知道的缺陷时，它有缺陷所以基本上这个脚本被设计为输出名称

可见但未显示正确输出的部分，例如，如果第 1 部分是 div 中唯一可见的部分，它将显示第 1 部分，如果多个部分可见，它将显示例如部分 - 1,section-2 等。基本上它应该像这样工作，不管部分高度如何

我知道我必须更改代码或更改它，但我越玩它越困惑，那么我该如何解决这个问题，这样我才能始终获得正确的输出？如果我必须完全更改我的代码才能执行此操作，那么我不介意。

这是我的代码

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);

function whichSectionsAreInSight(){
  var building= document.querySelector('#building');
  var top = building.scrollTop;
  var bottom = top+building.offsetHeight;
  var arr = [];
  
  Array.prototype.forEach.call(
  building.querySelectorAll('#building .sections'),
  
 function(sections){
    if ((sections.offsetTop < top && top <sections.offsetTop+sections.offsetHeight) || (sections.offsetTop < bottom && bottom < sections.offsetTop+sections.offsetHeight)){
      arr.push(sections.id);
    }
   
   }
   
  );
	
  document.querySelector('#status').innerHTML = arr.join(',')
}

  whichSectionsAreInSight();
  
});

h1{
  margin: 0;
  text-align: center;
}
#building{
  background-color: gray;
  height: 200px;
  width: 200px;
  overflow: auto;
}
.sections{
  height: 80px;
  width: 100%;
}
#section-1{
    background-color: dodgerblue;
}
#section-2{
    background-color: gold;
}
#section-3{
    background-color: red;
}
#section-4{
    background-color: gray;
    height: 220px;
}

<p id='status'></p>
<div id='building'>
  <div id='section-1' class='sections'><h1>Section 1</h1></div>
  <div id='section-2' class='sections'><h1>Section 2</h1></div> 
<div id='section-3' class='sections'><h1>Section 3</h1></div>
  <div id='section-4' class='sections'><h1>Section 4</h1></div>
</div>

Answer 1

你非常接近!

首先，您需要将父元素设置为 position:relative否则，被衡量的 parent 是文件。

此外，该算法比您拥有的更简单。只要确保元素的顶部小于父元素的底部，元素的底部大于父元素的顶部。

在您的情况下，这是 offsetTop < bottom和 offsetTop + offsetHeight > top

document.addEventListener('DOMContentLoaded', function() {

  document.querySelector('#building').addEventListener('scroll', whichSectionsAreInSight);

  function whichSectionsAreInSight() {
    var building = document.querySelector('#building');
    var top = building.scrollTop;
    var bottom = top + building.offsetHeight;
    var arr = [];

    Array.prototype.forEach.call(
      building.querySelectorAll('#building .sections'),

      function(section) {
        if (section.offsetTop < bottom && section.offsetTop + section.offsetHeight > top) {
          arr.push(section.id);
        }
      }

    );

    document.querySelector('#status').innerHTML = arr.join(',')
  }

  whichSectionsAreInSight();

});

h1 {
  margin: 0;
  text-align: center;
}

#building {
  background-color: gray;
  height: 200px;
  width: 200px;
  overflow: auto;
  position: relative;
}

.sections {
  height: 80px;
  width: 100%;
}

#section-1 {
  background-color: dodgerblue;
}

#section-2 {
  background-color: gold;
}

#section-3 {
  background-color: red;
}

#section-4 {
  background-color: gray;
  height: 220px;
}

<p id='status'></p>
<div id='building'>
  <div id='section-1' class='sections'>
    <h1>Section 1</h1>
  </div>
  <div id='section-2' class='sections'>
    <h1>Section 2</h1>
  </div>
  <div id='section-3' class='sections'>
    <h1>Section 3</h1>
  </div>
  <div id='section-4' class='sections'>
    <h1>Section 4</h1>
  </div>
</div>