jquery中添加滚动事件判断是否到底部做分页处理

// 到没到页面底部
父盒子高度固定(.father) 子盒子(.son)内容自动撑开
function isScrollToPageBottom() {
    var scrollTop = $('.father').scrollTop(); // 表示滚动条顶部距离元素顶部的距离
    var scrollHeight = $('.son').height();
    var windowHeight = $('.father').height();
    console.log(scrollTop, scrollHeight, windowHeight)
    return scrollTop >= (scrollHeight - windowHeight)
}
页面加载完成调用
setCurrentPage() {
 $('.father').scrollTop(0)
 $('.father').scroll(debounce(handle, 0));
}

// 防抖
function debounce(fn, wait) {
    var timeout = null;
    return function () {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}

参考解释: 可以使用scrollTop和scrollHeight属性来判断是否滑到底部。以下是一个示例代码

function isScrollToBottom() {
  var element = document.documentElement;
  var scrollTop = element.scrollTop;
  var scrollHeight = element.scrollHeight;
  var clientHeight = element.clientHeight;
  
  return scrollTop + clientHeight >= scrollHeight;
}

// 使用示例
if (isScrollToBottom()) {
  console.log("已滑到底部");
} else {
  console.log("未滑到底部");
}

这段代码中,scrollTop表示滚动条顶部距离元素顶部的距离,scrollHeight表示元素的滚动高度,clientHeight表示元素可见区域的高度。通过比较scrollTop + clientHeight和scrollHeight的大小关系,可以判断是否滑到底部。如果两者相等或者接近,即可判断为滑到底部。

你可能感兴趣的:(jquery,前端,javascript)