应无所住,而生其心
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

Jquery判断滚动条是否到底部

6863人阅读 2018/12/16 21:35 总访问:4814984 评论:0 收藏:0 手机
分类: Js相关


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



$(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("滚动条已经到底部了");
}



哈哈图片请忽略




欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价