Automatically load js code that adds content when the scroll bar scrolls to the bottom of the page_javascript skills

1. Register the page scroll event, window.onscroll = function(){ };

2. Related functions to obtain the page height, scroll bar position, and document height:

Copy code The code is as follows:

//Get the current position of the scroll bar
function getScrollTop() {
var scrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document. body.scrollTop;
}
return scrollTop;
}

//Get the height of the current range
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}

//Get the complete height of the document
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

3, add code at the bottom of the html page:

Copy code The code is as follows:

<script> <br>window.onscroll = function () { <br>if (getScrollTop() getClientHeight() == getScrollHeight()) { <br>alert("Reaching the bottom"); <br>} <br>} <br></script>

This way alert("bottom reached") will be triggered when the scroll bar reaches the bottom of the page. The next thing to do is to change the triggered function to an ajax call and dynamically add content to the page.

4, sample code for dynamically adding page elements:

Copy the code The code is as follows:

var newnode = document.createElement("a");
newnode.setAttribute("href", "#");
newnode.innerHTML = "new item";
document.body .appendChild(newnode);
var newline = document.createElement("br");
document.body.appendChild(newline);

Replace this code with alert( "reach the bottom");, you can see that when the scroll bar scrolls to the bottom, a line of "new item" will be added to the bottom of the page. Unlike scrolling down, it will continue to increase without end.

5, modify the sample code to ajax related code:

Copy the code The code is as follows:

<script> <br>window.onscroll = function () { <br>if (getScrollTop() getClientHeight() == getScrollHeight()) { <br>var xmlHttpReq = null; <br>/ /IE browser uses ActiveX <br>if (window.ActiveXObject) { <br>xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); <br>} <br>//Other browsers use window's sub-object XMLHttpRequest <br>else if (window.XMLHttpRequest) { <br>xmlHttpReq = new XMLHttpRequest(); <br>} <br><br>if (xmlHttpReq != null) { <br>//Set the request (not actually opened) , true: indicates asynchronous <br>xmlHttpReq.open("GET", "/ajaxtest", true); <br>//Set the callback. When the status of the request changes, it will be called, passing the parameter xmlHttpReq <br>xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); }; <br>//Submit request<br>xmlHttpReq.send(null); <br>} <br>} <br>} <br><br>function onajaxtest(req) { <br>var newnode = document.createElement("a"); <br>newnode.setAttribute("href", "#"); <br>newnode.innerHTML = req.readyState " " req.status " " req.responseText; <br>document.body.appendChild(newnode); <br>var newline = document.createElement("br"); <br>document.body.appendChild(newline); <br>} <br></script>

When the scroll bar reaches the bottom of the page, the following nodes will be added, as follows:

2 200
3 200 ajax ok
4 200 ajax ok

Here 2, 3, and 4 are the request status readyState, 200 is the http response status status, ajax ok is the text returned by the /ajaxtext application, please check the following reference materials for details.


According to the XMLHttpRequest documentation, you should be able to print out:

0 200

1 200

2 200

3 200 ajax ok

4 200 ajax ok

But I didn’t print out the two statuses 0 and 1 here. Why is this? Can the passing experts say something?