Home > Article > Web Front-end > Use jQuery to automatically load when scrolling to the bottom
Use jQuery to automatically load when scrolling to the bottom
- 亚连Original
- 2018-06-05 17:10:151468browse
This article mainly introduces jQuery's method of automatically loading more when scrolling to the bottom, involving jQuery's implementation skills of dynamically operating page elements based on ajax. Friends in need can refer to the following
The examples in this article are described jQuery implements a method to automatically load more when scrolling to the bottom. Share it with everyone for your reference, the details are as follows:
AJAX is used here to realize the scrolling to the end loading data function:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
AddSth();
});
$(function () {
$(".main").unbind("scroll").bind("scroll", function (e) {
var sum = this.scrollHeight;
if (sum <= $(this).scrollTop() + $(this).height()) {
AddSth();
}
});
});
function AddSth() {
$.ajax({
type: 'POST',
url: "index.aspx/ReturnSth",
dataType: "json",
contentType: "application/json; charset=utf-8",
//data: "",
success: function (data) {
json = $.parseJSON(data.d);
for (var i in json) {
var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";
$(".main").append(tbBody);
}
$(".main").append("<hr />");
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<p>下拉加载更多</p><br />
<p class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></p>
</form>
</body>
</html>The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.
Related articles:
Making a sliding stack component by using vue (detailed tutorial)
About using fetch to upload images in React Native (detailed tutorial)
The above is the detailed content of Use jQuery to automatically load when scrolling to the bottom. For more information, please follow other related articles on the PHP Chinese website!