zoukankan      html  css  js  c++  java
  • 页面滚动触底加载

    这个问题的思路就是内容盒子的内容滑动到最底部的时候,加载新的内容。

    判断上述情况需要有三个值:

    1、内容盒子的高度

    2、盒子里内容的总高度

    3、滚动条的scrollTop

    获取到三个值以后,只需要判断内容盒子的高度+滚动条的scrollTop = 盒子内容的高度即为触底。

    以window为例方法如下:

    $(window).scroll(function(){  
        var wScrollY = window.scrollY;              // 当前滚动条top值  
        var wInnerH = window.innerHeight;           // 设备窗口的高度
        var bScrollH = document.body.scrollHeight;  // body总高度   
        if (wScrollY + wInnerH >= bScrollH-10) {            
            console.log("到底啦")
        }    
    });  

    以自定义盒子为例:

    $(".box").scroll(function(){
     var $this =$(this),
     var scrollTop =$(this).scrollTop();        //滚动条top值  
     var viewH =$(this).innerHeight(),          //盒子高度 
     var contentH =$(this).get(0).scrollHeight, //盒子内容高度
        if(scrollTop + viewH >= contentH-10) { //到达底部10px时,加载新内容
            console.log("到底啦")
        }
    }); 

    如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

  • 相关阅读:
    ZOJ 1217 eight
    COJ 1080 A simple maze
    八数码(双向广搜)
    HDOJ 1043 eight
    [HDOJ] 小兔的棋盘
    ZOJ 2110 Tempter of the Bone
    POJ 2406 Power Strings
    [HDOJ] goagain的超级数列
    COJ 1216 异或最大值
    八数码(IDA*)
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/9067949.html
Copyright © 2011-2022 走看看