- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jQuery实现当拉动滚动条到底部加载数据</title>
- <style type="text/CSS">
- *{margin:0;padding:0;}
- body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
- a{color:#444;text-decoration: none;}
- a:hover{color:#065BC2;text-decoration: none;}
- .clear{clear:both;}
- img{border:none;vertical-align: middle;}
- ul{list-style: none;}
- </style>
- </head>
- <body>
- <script type="text/javascript" src1="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script type="text/javascript">
- var totalheight = 0;
- function loadData()
- {
- totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
- if ($(document).height() <= totalheight)
- {
- //加载数据
- $("#container").append($(document).scrollTop()+"<br/>");
- }
- }
- $(window).scroll( function() {
- console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
- console.log("页面的文档高度 :"+$(document).height());
- console.log('浏览器的高度:'+$(window).height());
- loadData();
- });
- </script>
- </head>
- <body>
- <div id="container">
- dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/171020136469.html
来源: http://www.codesnippet.cn/detail/171020136469.html