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

yufei       3 年, 3 月 前       665

对于设置了 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 元素的有两个高度

  1. 一个是可见区域的高度,这个一般通过 CSS 样式 height 来设定,jQuery 中可以通过下面的语句获得

    $("#s_c").height();
    

    如果是纯 JavaScript 代码,则如下

    document.getElementById('s_c').clientHeight;
    

    注意,为什么不可以用下面这条语句,因为它的输出是带单位的,比如 200px

    document.getElementById('s_c').style.height;
    
  2. 实际的高度,包括内容的高度和 padding-toppadding-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 操作就不应该放在事件处理中

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.