随笔- 137 文章- 0 评论- 34 阅读- 97万

滚动到页面底部自动加载内容

　　上网时经常会看到许多酷炫的网页，其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容，一直都很好奇是怎么样做到的，于是自己也尝试着写了一下。

　　先上个完整代码吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        div{
            width:900px;
            height:800px;
        }
        li{
            list-style-type:none;
        }
    </style>
</head>
<body id="container">
    <div>lfjakjflkf</div>
    <script>
        //获取滚动条当前的位置 
        function getscrolltop() { 
            var scrolltop = 0; 
            if (document.documentElement && document.documentElement.scrollTop) { 
                scrolltop = document.documentElement.scrollTop; 
            } 
            else if (document.body) { 
                scrolltop = document.body.scrollTop; 
            } 
            return scrolltop; 
        } 

        //获取当前可视范围的高度 
        function getclientheight() { 
            var clientheight = 0; 
            if (document.body.clientHeight && document.documentElement.clientHeight) { 
                clientheight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
            } else { 
                clientheight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
            } 
            return clientheight; 
        } 

        //获取文档完整的高度 
        function getscrollheight() { 
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
        } 
        window.onscroll = function () { 
            if(getscrolltop() + getclientheight() == getscrollheight()) { 
                var xhr;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHTTP")
                };
                xhr.open("get","load.json",true);
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4&& xhr.status==200){
                        var txt = xhr.responseText;
                        var str = "";
                        // 由于获取到的是json字符串，因此必须现将其转换为json对象。
                        $.each(JSON.parse(txt),function(key,value){
                            str += "<li>"+'姓名：'+value[0].name+'。年龄为：'+value[0].age+'。性别为：'+value[0].sex+"</li>"+"<br/>"+"<br/>";
                            $("body").append(str)    
                        })
                    }
                }
                xhr.send(); 
            }
        } 
    </script>
</body>
</html>

　load.json文件的代码如下：

{"person":[
    {"name":"tom","age":"25","sex":"男"}
]}

　好了，下面来分析下这段代码，其实先是页面加载完毕会有一部分内容，然后滑动滚动条，一直到文档可视区域高度+滚动条距离文档顶部高度等于文档总高度时异步加载一个json文件的内容。

　　这里有几个要点：1、获取文档的完整高度。2、获取文档可视区域高度。3、获取滚动条距离文档顶部的高度。4、判断滚动条是否滑动到页面底部，如到了底部则异步加载json文件。5、需要将异步加载的json文件渲染到页面中，由于获取到的是json字符串，因此需要使用JSON.parse()方法先将其转换为json对象，才可以使用$.each()方法进行遍历，然后逐个获取数据。

　　其实我这里获取文档高度、可视区域高度以及滚动条距离文档顶部高度使用js写的，相对要复杂点，如果用jQuery写的话，会是很简洁的，如

　　获取文档完整高度，可以使用$(document).height();

　　获取文档可视区域高度，可以使用$(window).height();

　　获取滚动条距离文档顶部的高度，可以使用$(window).scrollTop()。