JS监听元素滚动

使用监听 scroll 可以实现监听页面滚动或者元素滚动是否到底

案例代码

<template><divclass="app-container"><divclass="box"><divv-for="(item,index) in count":key="index"class="item">
        {{ item }}
      </div></div></div></template><script>exportdefault{name:"test",data(){return{count:20}},mounted(){this.handlerNodeScroll()},methods:{// 监听元素滚动handlerNodeScroll(){let that =this// 函数防抖let fun = that.debounce(e=>{// 距顶部let scrollTop = e.target.scrollTop;// 可视区高度let clientHeight = e.target.clientHeight;// 滚动条总高度let scrollHeight = e.target.scrollHeight;// 如果当前距离顶部的值加上可视区域的值大于等于总高度，则任务滚动条触底if(Math.ceil(scrollTop + clientHeight)>= scrollHeight){//容差：20px
          console.log('滚动到底部');if(that.count >=50)return
          that.count +=10}},500)// 监听滚动let box = document.querySelector(".box");
      box.addEventListener("scroll",function(e){fun(e)})},// 函数防抖debounce(handle, delay){let timer =null;returnfunction(){let _self =this,
          _args = arguments;clearTimeout(timer);
        timer =setTimeout(function(){handle.apply(_self, _args)}, delay)}}}}</script><stylescopedlang="scss">.box{width: 200px;height: 400px;border: 1px solid #7c7c7c;padding: 15px;box-sizing: border-box;overflow: auto;.item{margin-bottom: 10px;height: 40px;line-height: 40px;text-align: center;background-color: #1482f0;font-size: 18px;font-weight: 700;color: white;}}</style>

运行效果