原生javascript移动端滚动到底部加载更多数据效果代码

#麻辣小龙虾#

已于 2023-04-18 10:12:07 修改

阅读量3.8k

点赞数

分类专栏： web前端 javascript 文章标签： javascript

于 2017-07-17 23:31:10 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/75269467

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        #od{height:800px;}
        .box{height:100px;background:#ccc;margin:10px 0;}
    </style>
</head>
<body>
    <div class="ob" id="od">
		我是主体内容
    </div>
    <script>
        
        var timerId = null; //定时id

        window.onscroll = function(){
            var box =  document.createElement("div");
            var body = document.body;
            box.className = "box";

            var scrollTop = document.body.scrollTop;    //页面滚动高度
            var windheight = document.body.offsetHeight;    //页面总的宽度
            var h= document.documentElement.clientHeight || document.body.clientHeight;
            //视口宽度
            //滚动到底部
            if(scrollTop >= (windheight - h)){
                
                //发起请求，返回数据
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        box.innerText = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "json.json", true);
                xmlhttp.send(null);

                //设置延时避免滚动到底部时多次触发效果
                clearTimeout(timerId);
                timerId =  setTimeout(function(){
                    body.appendChild(box);
                },200);
            }
        }
    </script>
</body>
</html>