滑动页面滚动条,获取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)//关闭监听函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值