Question

我有这个脚本，旨在提及溢出div中的哪个部分，因此，例如，如果您看到特定的部分，它将显示第1部分在您的视野中

视线超过1个部分时，它会说类似第1节和第2节等...

我该怎么做？我想不通我尝试了很多事情，但是我做不了想要的事：（

这是我的代码

document.addEventListener('DOMContentLoaded',function(){

  document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);

function whichSectionsAreInSight(){
    //???
}
  });

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

<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>

<p id='status'></p><!--------The id call status is responsible 
in mentioning which section is in sight-->

Answer 1

在parent的滚动事件中，遍历childs并检查哪个可见，并将其id添加到数组。将所有打印数组的内容都放入页面

document.querySelector('#building').addEventListener('scroll', function(){
  var top = this.scrollTop;
  var bottom = top+this.offsetHeight;
  var arr = [];
  
  this.querySelectorAll("div").forEach(function(div){
    if (
      (div.offsetTop < top && top <div.offsetTop+div.offsetHeight) ||
      (div.offsetTop < bottom && bottom <div.offsetTop+div.offsetHeight)
    ){
      arr.push(div.id);
    }
  });
  document.getElementById("status").innerHTML = arr.join(",")
});

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

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

Answer 2

您好，这是我的穆罕默德代码和您的代码James的版本。一切归功于穆罕默德，任何上投票都应该归功于穆罕默德，这与IE修复程序（我的版本）一起

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: 225px;
  width: 100%;
}
#section-1{
    background-color: dodgerblue;
}
#section-2{
    background-color: gold;
}
#section-3{
    background-color: red;
}

<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>
<p id='status'></p>

检测正在查看的部分

2 个答案: