剑轩

Jquery判断滚动条是否到底部

电脑版发表于:2018/12/16 21:35


有时间我们需要判断滚动条是否已经滚动到底部,例如我们要做滚动刷新的功能



$(window).height():一个屏幕的高度

注意这个方法有可能位置到还是所有的高度,可以使用下面这个两个方法

var innerHeight =  window.innerHeight;
var clientHeight = document.body.clientHeight;


$(this).scrollTop():滚动条距离顶部的位置

$(document).height():整个页面的高度


    
    $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            //var windowHeight = $(window).height();
            var windowHeight = document.body.clientHeight;

            console.log("垂直滚动条位置:" + scrollTop + "--" + scrollHeight);
            console.log("scrollTop + windowHeight :" + windowHeight);
            if (scrollTop + windowHeight >= scrollHeight) {
                alert("已经到最底部了!");
            }
        });



上面说的是整个页面的判断,如果判断某个板块,逻辑是一样的
代码如下:

//获取某个板块的高度
let tagHeight = $(".CodeMirror-vscrollbar").height();
//获取这个板块目前滚动条滚动的位置
let tagScrollTop = $(".CodeMirror-vscrollbar").scrollTop();
//获取这个板块的滚动条总高度
let tagScrollHeight = $(".CodeMirror-vscrollbar")[0].scrollHeight;
//alert(tagHeight);
//alert(scrollTop);
//alert(tagHeight + tagScrollTop);
//alert(tagScrollHeight);

//当这个板块的高度加上目前滚动条滚动的位置等于滚动条的总高度就说明已经滚动到低了
if (tagHeight + tagScrollTop >= tagScrollHeight)
{
    alert("滚动条已经到底部了");
}



哈哈图片请忽略




关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢