使用监听scroll 可以实现监听页面滚动或者元素滚动是否到底
// 获取需要监听滚动的DOM元素const element = document.getElementById('your-element-id');// 监听滚动事件element.addEventListener('scroll', function() {// 判断是否滚动到页面底部if (element.scrollHeight - element.scrollTop === element.clientHeight) {console.log('已滚动到页面底部');// 在这里执行你的操作}});
在vue中的示例：
<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 {data() {return {}},mounted() {this.$nextTick(()=>{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 (scrollTop + clientHeight >= scrollHeight) { console.log('滚动到底部');}}, 50)// 监听滚动let box = document.querySelector(".box");box.addEventListener("scroll", (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>
