前段时间在自己写博客程序 , 想实现一个页面到达网页底部自动加载新文章功能. 其实可以非常简单 , 只需要几行代码

原理

  • 指定一个要判断的元素
  • 判断元素是否在浏览器的可见区域
  • 到达底部自动加载

实现

首先你需要定义什么位置才自动加载 , 意思就是网页滚动到什么html元素才开始触发ajax加载. 一般的网页设计都是会有一个页脚 , 所以我们只需要判断页脚是否在可视区域就可以了.当然不一定要页脚,也可以自己写一个不可见的span标签放在合适的位置来判断.

我设定的页脚是

 <span id="ajaxAutoLoad" style="display:none"><span>

    /**
     * 判断是否进入可视区域
     */
    function visibility(obj){
        var pos = obj.getBoundingClientRect();
        // 判断是否在可视区,这里只判断了高度是否在可视区
        if(pos.top>0&&window.innerHeight-pos.top>pos.height){
            return true;
        }else{
            return false;
        }
    }

    /**
     * 在页面的滚动事件进行判断
     */
    $(function(){
        $(document).scroll(function(){
            //得到footer对象
            var ajaxAutoLoadFooter= document.getElementById("ajaxAutoLoad");
            //是否在可视区域
            var alreadyArriveFooter = visibility(ajaxAutoLoadFooter);
            //判断是否到达底部
            if(alreadyArriveFooter){
            //到达底部 , 使用ajax自动加载
            }
        });
    });

总结

可以看到我在判断是否到底底部使用了一个 Element.getBoundingClientRect() 在MDN的解释 : “Element.getBoundingClientRect()方法的返回值是一个包含了一组文本矩形的文本矩形对象。返回值是一个DOMRect对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。”

深入了解 getBoundingClientRect