美文网首页
下拉加载刷新

下拉加载刷新

作者: 深吸一口气 | 来源:发表于2021-05-13 14:01 被阅读0次

获取滚动条当前的位置

//获取滚动条当前的位置
function getScrollTop() {
    let scrollTop = 0;
    if(document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if(document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}

获取当前可视范围的高度

//获取当前可视范围的高度  
function getClientHeight() {
    let clientHeight = 0;
    if(document.body.clientHeight && document.documentElement.clientHeight) {
        // Math.min是两个值取最小值
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
        // Math.max是两个值取最大值
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
}

获取文档完整的高度

//获取文档完整的高度 
function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

实现下拉刷新

//滚动事件触发
window.onscroll = function() {
    // 这里调控距离底部刷新距离
    if(getScrollTop() + getClientHeight() == getScrollHeight()) {
        console.log('下拉刷新了')
        //此处发起AJAX请求
    }
}

获取页面元素的位置

var wrapTop =document.getElementById('scrollWrap')
console.log(wrapTop.scrollTop + " " + "滚动条当前的位置")
console.log(wrapTop.scrollHeight + " " + "获取滚动条的高度")

相关文章

网友评论

      本文标题:下拉加载刷新

      本文链接:https://www.haomeiwen.com/subject/lhunkqtx.html