jQuery 判断 overflow-y:scroll 元素是否滚动到底部

对于设置了 overflow-y:scroll 的元素，我们经常有一个需求就是判断内容是否滚动到底部

这种需求如果使用 JavaScript 来实现的话，还是有点复杂的，但如果使用 jQuery 来实现，那么就相对简单了

overflow-y:scroll 元素的样式

对于 overflow-y:scroll 的元素，通常都会设定高宽，同时外加一个 overflow-y:scroll

height:200px;
width:200px;
overflow-y:scroll;

例如下面的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery 判断 overflow-y:scroll 元素的内容是否滚动到底部</title>
        <script src="https://www.twle.cn/static/js/jquery.min.js"></script>
    </head>
    <body>
        <div id="s_c" style="height:200px;width:200px;overflow-y: scroll;">
            <p>简单教程 ( www.twle.cn )以编程开发所需掌握的语言和知识入手,提供了最全的编程技术入门教程, 我们收集了HTML|CSS|Javascript等前端开发技能,Python|Java|Ruby|C|PHP| MySQL等各种编程语言的基础知识</p>

            <p>简单教程 ( www.twle.cn )以编程开发所需掌握的语言和知识入手,提供了最全的编程技术入门教程, 我们收集了HTML|CSS|Javascript等前端开发技能,Python|Java|Ruby|C|PHP| MySQL等各种编程语言的基础知识</p>

            <p>简单教程 ( www.twle.cn )以编程开发所需掌握的语言和知识入手,提供了最全的编程技术入门教程, 我们收集了HTML|CSS|Javascript等前端开发技能,Python|Java|Ruby|C|PHP| MySQL等各种编程语言的基础知识</p>
        </div>
    </body>
</html>

运行范例可以看到会出现垂直滚动条

overflow-y:scroll 元素的两个高度

从上面的范例中可以看出，overflow-y:scroll 元素的有两个高度

一个是可见区域的高度，这个一般通过 CSS 样式 height 来设定，jQuery 中可以通过下面的语句获得
```
$("#s_c").height();
```
如果是纯 JavaScript 代码，则如下
```
document.getElementById('s_c').clientHeight;
```
注意，为什么不可以用下面这条语句，因为它的输出是带单位的，比如 200px
```
document.getElementById('s_c').style.height;
```
实际的高度，包括内容的高度和 padding-top 和 padding-bottom
```
$('#s_c').prop('scrollHeight');
```
如果是纯 JavaScript 代码，则是
```
document.getElementById('s_c').scrollHeight;
```

滚动距离

「滚动距离」是指在滚动的过程中，滚动过的距离，一般通过 scrollTop 属性来获得

例如，在 jQuery 中，可以使用下面的代码

$("#s_c").scrollTop()

而对于纯 JavaScript 代码，则是

document.getElementById('s_c').scrollTop

如何判断是否滚动到底部

有了 overflow-y:scroll 元素的两个高度，又有了滚动距离，因此要判断是否滚动到底部也就很简单了，只要判断滚动记录是否等于内容的实际高度 - 可见区域高度

在 jQuery 中代码如下

var sc = $("#s_c"),
    h  = sc.height(),
    sh = sc.prop('scrollHeight')
    st = sc.scrollTop();

if ( st == sh - h ) {
    // 已经滚动到底部
}

纯 JavaScript 代码如下

var sc = document.getElementById('s_c'),
    h  = clientHeight,
    sh = sc.scrollHeight,
    st = sc.scrollTop;

if ( st == sh - h ) {
    // 已经滚动到底部
}

完整代码

在加上滚动事件，jQuery 中的代码如下

var sc = $("#s_c"),
    h  = sc.height(),
    sh = sc.prop('scrollHeight');

sc.on('scroll',function(e){
    var st = sc.scrollTop();

    if ( st == sh - h ) {
        // 已经滚动到底部
        alert('你已经滚动到了底部');
    }
});

纯 JavaScript 代码如下

var sc = document.getElementById('s_c'),
h  = sc.clientHeight,
sh = sc.scrollHeight;

sc.addEventListener('scroll',function(e){
    var st = sc.scrollTop;

    console.log(sh - h);
    if ( st == sh - h ) {
        // 已经滚动到底部
        alert('你已经滚动到了底部');
    }
});

scroll 事件可能会被高频度的触发, 因此回调函数不应执行重型操作，例如 DOM 操作就不应该放在事件处理中