页面上拉分页效果,滚动触发事件

1.整个页面分页拉数据

window.addEventListener('scroll', this.handleScroll);
function handleScroll() {
    //判断滚动到底部
     if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
        //触发事件
        getPeopleList();
    }
}

2.单个列表分页拉数据

  • 获取窗口高度
    let winHeight = document.documentElement.clientHeight
function scrollFunc(){
    $("#peopleList").scroll(function(){
        var $this =$(this),
            viewH =$(this).height(),//可见高度
            contentH =$(this).get(0).scrollHeight,//内容高度
            scrollTop =$(this).scrollTop();//滚动高度
        if(contentH = viewH + scrollTop) { //当滚动到底部时,
            getPeopleList();
        }
        if(contentH - viewH - scrollTop <= 100) { //当滚动到距离底部100px时,

        }
        if(scrollTop/(contentH -viewH) >= 0.95){ //当滚动到距离底部5%时
            // 这里加载数据..
            getPeopleList();
        }
    });
}
scrollFunc();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  •   ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天晓阅读 895评论 0 0
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 904评论 0 0
  • DOM 变化 如何确认浏览器是否支持 DOM 2 和 DOM 3 新增的模块:var supportsDOM2Co...
    云之外阅读 479评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,632评论 1 45