Home > Article > Web Front-end > How to automatically load more content when the scroll bar slides to the bottom
How to automatically load more content when the scroll bar slides to the bottom
- php中世界最好的语言Original
- 2018-03-14 17:06:573515browse
This time I will show you how to automatically load more content when the scroll bar slides to the bottom Automatic loading , and how to automatically load more content when the scroll bar slides to the bottom Notes What are they? Here are actual cases. Let’s take a look.
The example in this article describes how jQuery can 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 function of scrolling to the end to load data:
<!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>
I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website!
Recommended reading:
How to use jquery to create a magnifying glass effect
jquery adds HTML tags with styles
How jquery binds events to dynamically generated tags
How jQuery gets the value of the tag sub-element
The above is the detailed content of How to automatically load more content when the scroll bar slides to the bottom. For more information, please follow other related articles on the PHP Chinese website!