JQuery ajax 滚动底部加载更多
<%@ Page Language="C#" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html>
<script runat="server">
protected override void OnLoad(EventArgs e)
{
Response.Write("" + DateTime.Now.Ticks + " " + pn.Value);
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="jquery下载,实时更新jquery1.2到最新3.4.1所有版本下载" />
<meta name="keywords" content="jquery下载" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>---------------</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="pn" runat="server" Value="1" />
<asp:Button ID="btn1" Name="btn1" runat="server" Text="fffffffffffffff" Height="51px" Width="224px" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>uuuuuuuuuuuuuuuuuuu</p>
<div id="goods">
</div>
</div>
</form>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div id="pp" style="position: fixed; top: 0px; right: 4px;">
</div>
<script type="text/javascript">
var pageNumber = 1;
//alert(window.innerHeight);
// scroll at bottom
//jquery
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = document.body.clientHeight; //$(this).height();//document.body.clientHeight;
$("#pp").html(" scrollTop: " + scrollTop + "<br/>scrollHeight: " + scrollHeight + "<br/>windowHeight:" + windowHeight);
if (scrollTop + windowHeight > scrollHeight - 100) {
// alert("已经到最底部了！");
loadPageData();
}
});
var isLoadComplete = true;
function loadPageData() {
if (isLoadComplete == false) { return; }
isLoadComplete = false;
var url = '/index.asp?page=' + pageNumber;
$.ajax({
url: url,
dataType: 'text',
success: function (data) {
// alert("ok");
// $("#pp").html(data);
$("#goods").append(data);
pageNumber++;
},
complete: function (data) {
isLoadComplete = true;
//alert("complete");
},
});
}
</script>
</body>
</html>
另外
本来是获取可见区域窗口高度。
google最新的浏览器这个开始用$(this).height(); 得到的高度和 $(document).height();一样，IE和低版本的谷歌浏览器是正常的。
var windowHeight = document.body.clientHeight; //$(this).height();//document.body.clientHeight;
看来在新版的谷歌浏览器（版本 75.0.3770.100（正式版本） （64 位））里$(this).height(); 得到的高度是整个内容文档的高度。。。。。。很晕。
窗口尺寸文字参考 https://www.cnblogs.com/wujindong/p/5592908.html
fffffffffffffffff
test red font.
浙公网安备 33010602011771号