废话不多说，直接上代码
index.html
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 3 < html xmlns ="http://www.w3.org/1999/xhtml" > 4 < head > 5 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> 6 < title >Ajax_scroll </ title > 7 < link type ="text/css" href ="css/index.css" rel ="stylesheet" /> 8 < script type ="text/javascript" src ="js/jquery-1.4.4.min.js" ></ script > 9 < script type ="text/javascript" src ="js/index.js" ></ script > 10 </ head > 11 < body > 12 < div id ="wrapper" class ="wrapper" > 13 < div class ="content-form" ></ div > 14 < div id ="loading" >< span ></ span >加载中... </ div > 15 </ div > 16 </ body > 17 </ html >index.js
1 // 定义一个全局变量 2 var scr_a; 3 // var scr_b; 4 // 页面响应时加载 5 $.ajax({ 6 url:"input_form.html", 7 cache: false, 8 success: function (html) { 9 $(".content-form").append(html); 10 // 这里scrollHeight = offsetHeight,所以忙活了一个中午取值都不对 11 // scr_a = document.getElementById("wrapper").scrollHeight; 12 // console.log(scr_a); 13 scr_a = document.documentElement.offsetHeight - document.documentElement.clientHeight - 1; 14 // console.log(scr_a); 15 } 16 }); 17 // scroll ready 18 var hasShow = false; 19 $(window).bind("scroll", function () { 20 if (hasShow) { 21 $(window).unbind("scroll"); 22 return; 23 } 24 // Ajax请求开始显示 25 $("#loading").ajaxStart( function () { 26 $( this).show(); 27 }); 28 var t = $(document).scrollTop(); 29 // console.log(t); 30 if (t > scr_a) { 31 hasShow = true; 32 // 延迟2秒加载测试Ajax效果 33 setTimeout( function () { 34 $.ajax({ 35 url:"input_form.html", 36 cache: false, 37 success: function (html) { 38 $(".content-form").append(html); 39 // scr_b = document.documentElement.offsetHeight - document.documentElement.clientHeight - 1; 40 // console.log(scr_b); 41 } 42 }); 43 }, 2000); 44 } 45 // Ajax请求结束隐藏 46 $("#loading").ajaxStop( function () { 47 $( this).hide(); 48 }); 49 });
index.css
1 html { 2 color: #000; 3 background: #FFF; 4 font: 12px/1.5 \5b8b\4f53, tahoma, arial 5 } 6 7 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { 8 margin: 0; 9 padding: 0 10 } 11 12 table { 13 border-collapse: collapse; 14 border-spacing: 0 15 } 16 17 fieldset, img { 18 border: 0 19 } 20 21 address, caption, cite, code, dfn, em, strong, th, var { 22 font-style: normal; 23 font-weight: normal 24 } 25 26 ol, ul { 27 list-style: none 28 } 29 30 caption, th { 31 text-align: left 32 } 33 34 h1, h2, h3, h4, h5, h6 { 35 font-size: 100%; 36 font-weight: normal 37 } 38 39 q:before, q:after { 40 content: '' 41 } 42 43 abbr, acronym { 44 border: 0; 45 font-variant: normal 46 } 47 48 sup { 49 vertical-align: text-top 50 } 51 52 sub { 53 vertical-align: text-bottom 54 } 55 56 input, textarea, select { 57 font-family: inherit; 58 font-size: inherit; 59 font-weight: inherit 60 } 61 62 input, textarea, select { 63 *font-size: 100%; 64 } 65 66 legend { 67 color: #000 68 } 69 70 .wrapper { 71 width: 950px; 72 margin: 0 auto; 73 padding: 0 74 } 75 76 .content-form { 77 margin: 9px 0; 78 float: left; 79 line-height: 26px 80 } 81 82 #loading { 83 margin: 0 auto; 84 text-align: center; 85 width: 80px; 86 } 87 88 #loading span { 89 background: url("../img/indicator.gif") no-repeat; 90 float: left; 91 width: 16px; 92 height: 16px; 93 }
/Files/qzsonline/Ajax_scroll.rar
转载于:https://www.cnblogs.com/qzsonline/archive/2012/01/30/2332116.html
