When the scroll bar scrolls to the bottom of the page it automatically loads the js code to add content

  • 2020-03-30 02:58:30
  • OfStack

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

2. Functions to obtain page height, scroll bar position and document height:
 
//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 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; 
} 

//Gets 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:
 
<script> 
window.onscroll = function () { 
if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
alert(" Reach the bottom "); 
} 
} 
</script> 

This triggers an alert(" reach bottom ") when the scroll bar reaches the bottom of the page. The next step is to change the function of the trigger to an ajax call, adding content to the page dynamically.

4. Sample code to dynamically add page elements:
 
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 "); As you can see, when the scroll bar scrolls to the bottom, a line of "new item" will be added to the bottom of the page.

5. Change the sample code to ajax-related code:
 
<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 XMLHttpRequest, a child object of the window
else if (window.XMLHttpRequest) { 
xmlHttpReq = new XMLHttpRequest(); 
} 

if (xmlHttpReq != null) { 
//Set the request (it is not really open), true: means asynchronous
xmlHttpReq.open("GET", "/ajaxtest", true); 
//Set the callback to be called when the state of the request changes, passing the parameter xmlHttpReq
xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); }; 
//Submit a 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 reaches the bottom of the page, the following nodes are added, as follows:

2, 200
3 200 ajax ok
4 200 ajax ok

Here 2, 3, 4, is the request status readyState, 200 is the HTTP response status status, ajax ok is /ajaxtext application returned text, see the following resources.


According to the documentation for XMLHttpRequest, 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 a 0 and a 1 here, so why is that?

Related articles: