代码语言：javascript复制
// useScroll.js
import { debounce } from '@/common/util.js'
export default function useScroll(elRef) {
console.log('########3useScroll', elRef.value)
let el = window
const isReachBottom = ref(false)
const clientHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
const scrollListenerHandler = debounce(() => {
if (el === window) {
clientHeight.value = document.documentElement.clientHeight || document.body.clientHeight
scrollHeight.value = document.documentElement.scrollHeight || document.body.scrollHeight
scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
} else {
clientHeight.value = el.clientHeight
scrollTop.value = el.scrollTop
scrollHeight.value = el.scrollHeight
}
if (clientHeight.value scrollTop.value >= scrollHeight.value) {
isReachBottom.value = true
} else {
isReachBottom.value = false
}
console.log('#########scrollTop', scrollTop.value)
console.log('#########clientHeight', clientHeight.value)
console.log('#########scrollHeight', scrollHeight.value)
console.log('#########isReachBottom', isReachBottom.value)
}, 100)
onMounted(() => {
if (elRef) {
el = elRef.value
}
el.addEventListener('scroll', scrollListenerHandler)
})
onUnmounted(() => {
el.removeEventListener('scroll', scrollListenerHandler)
})
return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}使用的时候，通过监听到达底部的变量改变，可以做想做的事情，比如加载更多，或跳转页面等。
代码语言：javascript复制注意：对于滚动事件，最好要使用防抖，防抖可以保证最后一次滚动事件始终是触发的，而节流是在一段时间内执行一次，最后一次不保证会触发，除非手动修改节流方法，来最后一次保证始终触发。
修改后的节流方法如下：
代码语言：javascript复制// 节流, 不需要 setTimeout，只需要判断上次执行和本次触发时间的时间差
// setTimeout只是用来兜底的，防止最后一次没有执行
function throttle(fn, delay) {
let timer = null;
let begin = 0;
return function () {
if (timer) {
clearTimeout(timer);
}
let flag = false;
let cur = new Date().getTime();
if (cur - begin > delay) {
fn.apply(this, arguments);
begin = cur;
flag = true;
}
console.log("flag", flag);
if (!flag) {
timer = setTimeout(() => {
console.log("兜底");
fn.apply(this, arguments);
}, delay);
}
};
}修改前：
代码语言：javascript复制// 节流
const throttle = (func, delay) => {
let lastTime = 0;
return function (...args) {
let now = new Date().getTime();
if (now - lastTime >= delay) {
func.apply(this, args)
lastTime = now;
}
}
}
// 防抖
function debounce(func,delay) {
let timer = null;
return function(...args){
clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this,args)
}, delay);
}
} 
