h5上滑加载，有触底距离（vue+ts）

sirenaki

于 2022-12-28 16:09:07 发布

阅读量268

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_69688393/article/details/128470005

版权

<div class="content" id="scroll"></div>

let oldScrollTop: number = 0; // 记录上一次滚动结束后的滚动距离
const scrollTop = ref<number>(0); // 记录当前的滚动距离
const scrollFixedStatus = ref<boolean>(true);

let drop : number = 0;//判断下滑动作
let bottom : number = 0;//控制方法只触发一次（锁定）
let down : number = 0;//触底或拿到新数据解锁
const handleScroll = () => {
  window.addEventListener("scroll", () => {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // scrollTop滚动条当前值，drop滚动条上一秒的值，scroll > 0 时上滑
    const scroll = scrollTop - drop;//上滑
    // scrollHeight是现有视图高度，down原视图高度ÿ