您正在使用IPV4(35.153.166.111)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
虚位以待
2021年 冬至节 14
2021年 圣诞节 18
2022年 元 旦 25
2022年 春 节 56
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    jQuery判断网页是否已经滚动到浏览器底部的实现方法
    内容摘要: $(window).height();//用于获取浏览器显示区域的高度$(window).width();//用于获取浏览器显示区域的宽度$(document.body).height();//获取页面文档的高度$(document.body).width();//获取页面文档的宽度$(document).scrollTop();//获取垂直滚动条到顶部的垂......
    $(window).height();//用于获取浏览器显示区域的高度

    $(window).width();//用于获取浏览器显示区域的宽度

    $(document.body).height();//获取页面文档的高度

    $(document.body).width();//获取页面文档的宽度

    $(document).scrollTop();//获取垂直滚动条到顶部的垂直距离

    $(document).scrollLeft();//获取水平滚动条到左边的水平距离

    通过上面的知识点,可以知道:浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度。

    有了这个结论,那么实现起来就容易了。下面的代码实现了,判断用户是否浏览到了网页的底部。

    $(window).scroll(function(){

    varh=$(document.body).height();//网页文档的高度

    varc=$(document).scrollTop();//滚动条距离网页顶部的高度

    varwh=$(window).height();//页面可视化区域高度

    if(Math.ceil(wh+c)>=h){

    alert("我已经到底部啦");

    }

    })

    如果需要判断用户是否已经浏览到某个元素的话,那么只需要把上面的网页文档高度,换成某一个元素距离网页顶部的距离就可以了。例如:

    $(window).scroll(function(){

    varh=$("#div").offset().top;//id为div的元素距离网页顶部的距离

    varc=$(document).scrollTop();//滚动条距离网页顶部的高度

    varwh=$(window).height();//页面可视化区域高度

    if(Math.ceil(wh+c)>=h){

    alert("我已经到底部啦");

    }

    })

    在这里读者需要注意,判断条件中,wh+c取得是满足大于等于该数字的最小整数。经过笔者的测试,在IE7、8、9、11上都没有问题。

    接下来笔者把上面的代码封装为一个插件。

    (function($){

    //backcall是回调函数,count表示回调函数被执行的次数,count只有在元素通过滚动条滑出的时候才起作用

    $.fn.inBottom=function(backcall){

    //判断当前元素是否在目前屏幕可视化区域之内

    if(this.offset().top>=$(window).height()){

    this.inScroll(backcall,count);

    }else{

    this.inWindow(backcall);

    }

    };

    //直接加载回调函数

    $.fn.inWindow=function(backcall){

    backcall();

    };

    //滚动监听滑动条,元素滚动到屏幕底部的时候,加载回调函数

    $.fn.inScroll=function(backcall,count){

    var$this=this;

    $(window).scroll(function(){

    //获得这个元素到文档顶部的距离

    varawayDocTop=$this.offset().top;

    //获得滚动条的top

    varsTop=$(document).scrollTop();

    //获得可视化窗口的高度

    varwh=$(window).height();

    if(Math.ceil(wh+sTop)>=awayDocTop){

    if(count>0){

    backcall();

    count--;

    }

    };

    });

    };

    })(jQuery);

    然后读者在引入上面的插件文件后,就可以通过类似于下面的代码调用了。

    $("#div").inBottom(function(){

    alert("我被回调了");

    },1);

    上一篇:原生js实现仿window10系统日历效果的实例 下一篇:vue修改滚动条样式的方法
    发布日期:2021/11/18
    手机扫二维码直达本页
    发布时间:16:30:32
    点击:173
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021