jquery判断网页到达顶部和底部

在网页应用中我们经常会遇到这样的需求

当页面滑动到顶部的时候
当页面滑动到底部的时候（滑动到底部加载更多数据）
某个元素进入可视区范围的时候(图片懒加载)

通常要实现这些判断的话就必须对网页中的各种高度有个清晰的了解，如页面可视高度，页面总内容高度以及页面滚动的高度等

var scrollTop = $(this).scrollTop();//滚动条的高度，即页面滚动的高度
var scrollHeight = $(document).height();//页面总内容的高度
var windowHeight = $(this).height();//页面可视区的高度即设备的高度

当页面滑动到底部的时候也就是说，滚动的高度和可视区的高度二者相加等于页面内容的高度.

当页面滑动到顶部的时候也就是说滚动的高度等于0

基于这两点我自己写了两个判断的函数：

//判断页面是否滚动到了底部
function judgeIfTop(){
    var scrollTop = $(this).scrollTop();//滚动条的高度，即页面滚动的高度
    if(scrollTop ==0){
        return true;
    }
}


//判断页面是否滚动到了底部
function judgeIfBottom(){
    var scrollTop = $(this).scrollTop();//滚动条的高度，即页面滚动的高度
    var scrollHeight = $(document).height();//页面总内容的高度
    var windowHeight = $(this).height();//页面可视区的高度即设备的高度
    if(scrollTop + windowHeight == scrollHeight){
        return true;
    }
}

还有一种经常应用的场景就是图片懒加载，懒加载一个最重要的核心就是要判断图片是否进入了可视区，那么该怎样判断呢？

获元素的offsetTop，如果offsetTop的值大于或等于滚动的高度则该元素进入可视区内

//判断元素是否进入了可视区域
function judgeIfView(ele){
    var offsetTop=document.getElementById(ele).offsetTop;
    var scrollTop = $(this).scrollTop();//滚动条的高度，即页面滚动的高度
    var windowHeight = $(this).height();//页面可视区的高度即设备的高度
    if (offsetTop >= scrollTop&& offsetTop < scrollTop+windowHeight ) {
        console.log("图片开始进入可视范围");
    }
}

jquery判断网页到达顶部和底部

猜你喜欢