JS监听元素滚动

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

案例代码

<template><div class="app-container"><div class="box"><div v-for="(item,index) in count" :key="index" class="item">{{ item }}</div></div></div></template><script>export default {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) { //容差：20pxconsole.log('滚动到底部');if (that.count >= 50) returnthat.count += 10}}, 500)// 监听滚动let box = document.querySelector(".box");box.addEventListener("scroll", function (e) {fun(e)})},// 函数防抖debounce(handle, delay) {let timer = null;return function () {let _self = this,_args = arguments;clearTimeout(timer);timer = setTimeout(function () {handle.apply(_self, _args)}, delay)}}}}</script><style scoped lang="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>

运行效果