通过滚动条，自动加载数据

最新推荐文章于 2024-03-27 15:30:00 发布

DA6328

最新推荐文章于 2024-03-27 15:30:00 发布

阅读量145

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Mwsoft/p/3788264.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>拉动滚动条加载数据</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () { 
    var i = 4;$(window).bind("scroll", function (event) 
    { 
        //滚动条到网页头部的 高度，兼容ie,ff,chrome
         var top = document.documentElement.scrollTop + document.body.scrollTop; 
         //网页的高度 
         var textheight = $(document).height(); 
         // 网页高度-top-当前窗口高度  
         if (textheight - top - $(window).height() <= 100) { if (i >= 100) { return; 
         //控制最大只能加载到100
    }
     $('#div1').css("height", $(document).height() + 100);i++;
         //可以根据实际情况，获取动态数据加载 到 div1中
         $('<div>' + i + '</div>').appendTo($('#div1'));
     } 
 }); 
     })
    </script>
     <style>
        #div1 div
        {
            font-size: 100px;
            background: #ccc;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 1000px;" id="div1">
        <div>
            1</div>
        <div>
            2</div>
        <div>
            3</div>
        <div>
            4</div>
    </div>
    </form>
</body>
</html>

转载于:https://www.cnblogs.com/Mwsoft/p/3788264.html

DA6328

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过滚动条，自动加载数据

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>拉动滚动条加载数据</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"...
复制链接

扫一扫