When the scroll bar scrolls to the bottom of the page, automatically loads the JS code adding content

This article mainly describes how to use Javscript to implement scroll bar scroll to the bottom of the page automatically loaded add page content, the need for friends can refer to the next
.. 1, Register page scrolling event, Window.onscroll = function () {};

2, related to get the page height, scroll bar position, document height function:

Copy the code code as follows:
Gets 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;
}

Gets the current height of the 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 full 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 the code code as follows:
<script>
Window.onscroll = function () {
if (getscrolltop () + getclientheight () = = Getscrollheight ()) {
Alert ("Reach Bottom");
}
}
</script>

This triggers an alert ("Reach Bottom") when the scrollbar reaches the bottom of the page. The next thing to do is to change the triggered function to an AJAX call to dynamically add content to the page.

4. Dynamically increase the sample code for the page element:

Copy the code code 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 Bottom"), and you can see that when the scroll bar is scrolled to the bottom, a line "new item" will be added at the bottom of the page, with different scrolling down, endlessly increasing, endless.

5, modify the sample code to the AJAX-related code:

Copy the code code as follows:
<script>
Window.onscroll = function () {
if (getscrolltop () + getclientheight () = = Getscrollheight ()) {
var xmlhttpreq = null;
Internet Explorer uses ActiveX
if (window. ActiveXObject) {
Xmlhttpreq = new ActiveXObject ("Microsoft.XMLHTTP");
}
Other browsers use the child object of window XMLHttpRequest
else if (window. XMLHttpRequest) {
Xmlhttpreq = new XMLHttpRequest ();
}

if (xmlhttpreq! = null) {
Set request (not really open), true: Indicates asynchronous
Xmlhttpreq.open ("GET", "/ajaxtest", true);
Sets the callback, which is called when the state of the request changes, passing parameters Xmlhttpreq
Xmlhttpreq.onreadystatechange = function () {onajaxtest (xmlhttpreq);};
Submit Request
Xmlhttpreq.send (NULL);
}
}
}

function Onajaxtest (req) {
var newnode = document.createelement ("a");
Newnode.setattribute ("href", "#");
newnode.innerhtml = req.readystate + "+ req.status +" + req.responsetext;
Document.body.appendChild (NewNode);
var newline = document.createelement ("BR");
Document.body.appendChild (newline);
}
</script>

When the scroll bar is at the bottom of the page, the following nodes are added as follows:

2 200
3 Ajax OK
4 Ajax OK

Here 2, 3, 4, is the state of the request readystate,200 is the HTTP response status Status,ajax OK is the text returned by the/ajaxtext application, see the following reference.

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

0 200

1 200

2 200

3 Ajax OK

4 Ajax OK

When the scroll bar scrolls to the bottom of the page, automatically loads the JS code adding content