滚动加载 scrollHeight clientHeight scrollTop

前段时间写滚动加载总是依赖框架   完全没有理解怎么回事，今天抽空研究一下！
总得来说 其实就是一句话：  距离顶部+当前高度 >=文档总高度    即代表滑动到底部
话不多说 看示例吧！

$(window).scroll(function(){

    var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
    var scrollHeight = $(document).height();   //当前页面的总高度
    var clientHeight = $(this).height();    //当前可视的页面高度
    // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
    if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
        //滚动条到达底部
        alert(3)
    }else if(scrollTop<=0){
        //滚动条到达顶部
        alert(4)
        //滚动条距离顶部的高度小于等于0 TODO

    }
});

var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

var ofs = $(".weui-tabbar").offset().top
if (ofs - scrollTop - window.innerHeight - 100 < 0) {
    console.log(10);
    if (loadding) return;
    loadding = true;
    loadData()
}

<script type="text/javascript">
    //获取列表中的原有内容
    var content=document.getElementById("img").innerHTML;
    //每被调用一次，就将网页原有内容添加一份，这个大家可以写自己要加载的内容或指令
    function addLi(){
        document.getElementById("img").innerHTML+=content;
    }
    /*
     * 监听滚动条，本来不想用jQuery但是发现js里面监听滚动条的事件不好添加，这边就引用了Jquery的$(obj).scroll();这个方法了
     */
    $(window).scroll(function(){
        //下面这句主要是获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8
        var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
        //clientHeight是网页在浏览器中的可视高度，
        var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
        //scrollTop是浏览器滚动条的top位置，
        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        //通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；
        if(scrollTop+clientHeight==htmlHeight){
            addLi();
        }
    })
</script>