div设置overflow-y:scroll后, 如何监听滚动到底部的事件

大多数情况下,我们都是判断页面滚动到底部,如下:

window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
    var clientHeight  = document.documentElement.clientHeight;  // 客户区大小
    var scrollHeight  = document.documentElement.scrollHeight;  // 没用滚动条的情况下,元素内容的总高度
    var scrollTop     = document.documentElement.scrollTop;     // 被隐藏在内容区域上方的像素数
    if(scrollTop + clientHeight == scrollHeight && this.loading!=true && this.nomore==false){
    console.log("到底了...");
    this.getComments();
    return;
    }
    console.log("没到底: ", clientHeight, scrollHeight, scrollTop);
}


在移动端,有时候会有这样的需求,需要一个弹出层,高度和宽度都是100%,然后设置overflow-y:scroll。 

document.querySelector(".item").addEventListener('scroll', this.handleScroll2);
handleScroll2(arg) {
    var clientHeight  = document.documentElement.clientHeight;         // 客户区大小
    var scrollHeight  = document.querySelector(".item").scrollHeight;  // 没用滚动条的情况下,元素内容的总高度
    var scrollTop     = document.querySelector(".item").scrollTop;     // 被隐藏在内容区域上方的像素数
    console.log("1:: ", clientHeight, scrollHeight, scrollTop);

    if(scrollTop + clientHeight == scrollHeight && this.loading!=true && this.nomore==false){
    console.log("到底了...");
    // this.getComments();
    return;
    }
    console.log("没到底: ", );
}

 

修改时间 2018-05-28

真诚赞赏,手留余香
赞赏
随机推荐
怪异模式(Quirks Mode)导致 button 和 input 的大小不统一原因
FTP over TLS加密传输 Filezilla
SQLite数据库的id字段,怎么设置成从1开始自增
视频基础知识
手机APP界面颜色搭配案例
Parameter 一个轻量的 Node.js 数据验证工具
CSS 实现夜间模式和CSS自定义属性(变量)
webpack报错:Cannot assign to read only property 'exports' of object
Javascript游戏中的“透视”
cropper.js 剪切图片并上传的两种方式