window监听 滑动到最底部事件-- 单页应用和非单页 写法不一样

function getClientHeight() {
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        return (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    } else {
        return (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }
}

function winScroll (){
    let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;    //滚动条距离顶部的高度
    let scrollHeight = getClientHeight();   //当前页面的总高度
    let clientHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);    //当前可视的页面高度
    // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
    if(scrollTop +  scrollHeight>= clientHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 count++;         //每次滑动count加1
        //filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法,count为当前分页数 此处条件单页应用和非单页 写法不一样
        console.log('滚动条距离顶部', scrollTop);
        console.log('可视的高度', clientHeight);
        console.log('页面总高度', scrollHeight);
        console.log('到底了');
    }else{
        //滚动条距离顶部的高度小于等于0 TODO
        //alert("下拉刷新,要在这调用啥方法?");
        console.log('滚动条距离顶部', scrollTop);
        console.log('可视的高度', clientHeight);
        console.log('页面总高度', scrollHeight);
    }
}

window.addEventListener('scroll', winScroll);

猜你喜欢

转载自blog.csdn.net/xiaopeng_han123/article/details/80558087