滚动加载

最新推荐文章于 2024-09-16 08:47:17 发布

iteye_14791

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量106

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_14791/article/details/82308493

版权

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

   <script type="text/javascript">
    $(document).ready(function(){
        var elem_height = $("body").height()+200;           //插入元素高度/单位px(每屏高度)
	var main = $("#try");                         //主体元素
	$(main).css("height",elem_height);
        var maxTimes = 6;            
        var offsetNum = 0;
        $(window).scroll(function(){
            var scrollPos = $(window).scrollTop();    //滚动条距顶部距离
            var bodyHeight = $("body").height();          //页面(约等于窗体)高度/单位px
            var mainHeight = main.height();               //主体高度px

            if((bodyHeight + scrollPos) >= (mainHeight) && offsetNum != maxTimes){
                $(main).append("<div style='height:"+elem_height+"' >hello world"+scrollPos+"---"+offsetNum+"</div>");
                offsetNum++;
            }
        });
    });
    </script>
</head>
<body>
    <div id="try">
        <div id="follow">this is a scroll test;<br/>    </div>
    </div>
	<div>页面下拉自动加载内容......</div>
</body>
</html>