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("到底啦")
        }
    }); 

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

  • 相关阅读:
    w3c标准
    HTML+CSS理解
    Mybatis源码日记(一)
    Sqlmap学习笔记(三)
    EasyExcel读取跨行单元格数据为空的解决办法
    Sqlmap学习笔记(二)
    Sqlmap学习笔记(一)
    Linux安装运行Typora
    Kafka环境搭建
    Mysql主从配置
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/9067949.html
Copyright © 2011-2022 走看看