随着滚动条的滚动加载数据

最新推荐文章于 2024-04-28 16:24:30 发布

weixin_30836759

最新推荐文章于 2024-04-28 16:24:30 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/houzuofeng/p/3476667.html

版权

<!DOCTYPE=html>
<html>
<head>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>

   <script type="text/javascript">
    $(document).ready(function(){
        var range = 50;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 20;            //设置加载最多次数
        var num = 1;
        var totalheight = 0; 
        var main = $("#content");                     //主体元素
        $(window).scroll(function(){
            //滚动条距顶部距离(页面超出窗口的高度)
            var sh=$(window).scrollTop();
            //浏览器的高度
            var bh=$(window).height();
            //页面的文档高度
            var dh=$(document).height();
            
            totalheight = parseFloat(bh) + parseFloat(sh);
            if((dh-range) <= totalheight) {
                main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+sh+"---"+num+"</div>");
                num++;
            }
        });
    });
    </script>
</head>
<body>
    <div id="content" style="height:960px">
        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>
        <div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/houzuofeng/p/3476667.html

weixin_30836759

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随着滚动条的滚动加载数据

<!DOCTYPE=html><html><head><script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).re...
复制链接

扫一扫