滑动页面滚动条，获取div显示顶部是那个div

页面滚动，或者下拉滚动条时，监听显示在那个div上

/*设置高度和可以上下滚动*/
<div id="systemDocumentright">
/*没个div设置高度，让其显示出滚动条可看效果，设置背景颜色更佳*/
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
</div>



window.addEventListener("scroll", this.handleScrolls,true)   //监听滚动事件

handleScrolls （e）{
      let fatherheight = document.getElementById('systemDocumentright').scrollTop;//获取向上滚动的距离
      let sonheight = document.getElementById('systemDocumentright').children;//获取systemDocumentright 元素    
      let num = fatherheight
      for (let i=0;i<sonheight.length;i++) {  //遍历systemDocumentright 下的div元素
         if (num - sonheight[i].scrollHeight  +20 <0) {
           return  highlight = sonheight[i].id //获取滚动到顶部元素的id
         }else {
            num = num - sonheight[i].scrollHeight//如果滚动的高度，大于元素，则减去该元素，再去循环遍历，直到在头部的那个元素上停止
         }
      }
}
window.removeEventListener('scroll', this.handleScrolls)//关闭监听函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27