jQuery实现判断滚动条滚动到document底部的方法分析

首先，我们需要理解什么是滚动条，以及怎样判断滚动条是否已经滚到document底部。其次，我们需要掌握jQuery如何实现这一功能。

1. 判断滚动条是否已经滚到document底部

为了判断滚动条是否滚到了document底部，我们需要获取当前窗口的滚动高度和文档的总高度，然后将它们相加，如果相等或者大于文档总高度，就说明已经滚到了底部。代码如下：

var windowHeight = $(window).height(), 
    scrollHeight = $(document).height(), 
    scrollTop = $(window).scrollTop(); 
if (scrollTop + windowHeight >= scrollHeight) { 
    // 到达底部 
}

1. jQuery 实现判断滚动条滚动到document底部的方法

2.1 方式一：监听滚动事件

我们可以监听窗口的滚动事件，实时判断滚动条是否到达底部。代码如下：

$(window).scroll(function() {
    var windowHeight = $(window).height(), 
        scrollHeight = $(document).height(), 
        scrollTop = $(window).scrollTop(); 
    if (scrollTop + windowHeight >= scrollHeight) { 
        // 到达底部 
    } 
}); 

2.2 方式二：设置定时器

我们也可以设置定时器，定时判断滚动条是否到达底部。代码如下：

setInterval(function() { 
    var windowHeight = $(window).height(), 
        scrollHeight = $(document).height(), 
        scrollTop = $(window).scrollTop(); 
    if (scrollTop + windowHeight >= scrollHeight) { 
        // 到达底部 
    } 
}, 500);

上面代码中，定时器每500毫秒检查一次滚动条滚动到底部的状态。

示例一：使用方式一，监听滚动事件

下面的代码演示了如何使用方式一，监听滚动事件实时判断滚动条是否到达底部，并提示用户。

$(window).scroll(function() { 
    var windowHeight = $(window).height(), 
        scrollHeight = $(document).height(), 
        scrollTop = $(window).scrollTop(); 
    if (scrollTop + windowHeight >= scrollHeight) { 
        alert("已经到达底部！"); 
    } 
});

示例二：使用方式二，设置定时器

下面的代码演示了如何使用方式二，设置定时器检查滚动条是否到达底部，并提示用户。

setInterval(function() {
    var windowHeight = $(window).height(), 
        scrollHeight = $(document).height(), 
        scrollTop = $(window).scrollTop(); 
    if (scrollTop + windowHeight >= scrollHeight) { 
        alert("已经到达底部！"); 
    } 
}, 500);

这里使用的定时器每500毫秒检查一次滚动条状态，如果已经到达底部就会提示用户。