1. Enregistrez l'événement de défilement de la page, Window.onscroll = function () {};
2. Fonctions connexes pour obtenir la hauteur de la page, la position de la barre de défilement et la hauteur du document:
La copie de code est la suivante:
// Obtenez la position actuelle de la barre de défilement
fonction getCrollTop () {
var scrolltop = 0;
if (document.DocumentElement && document.DocumentElement.ScrollTop) {
ScrollTop = document.DocumentElement.ScrollTop;
}
else if (document.body) {
scrollTop = document.body.scrolltop;
}
return ScrollTop;
}
// Obtenez la hauteur de la plage actuelle
fonction getClientHeight () {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = math.min (document.body.clientHeight, document.documentElement.clientHeight);
}
autre {
clientHeight = math.max (document.body.clientHeight, document.documentElement.clientHeight);
}
return ClientHeight;
}
// Obtenez la pleine hauteur du document
fonction getCrollHeight () {
return math.max (document.body.scrollHeight, document.documentElement.scrollHeight);
}
3. Ajouter du code en bas de la page HTML:
La copie de code est la suivante:
<cript>
window.onscroll = function () {
if (getcrolltop () + getClientHeight () == getCrollHeight ()) {
alerte ("atteindre le fond");
}
}
</cript>
Cela déclenchera Alert ("Atteindre le bas") lorsque la barre de défilement atteint le bas de la page. Ce que vous devez faire ensuite, c'est modifier la fonction déclenchée en appel ajax et ajouter dynamiquement du contenu à la page.
4. Exemple de code pour ajouter dynamiquement des éléments de page:
La copie de code est la suivante:
var newNode = document.CreateElement ("A");
newNode.setAttribute ("href", "#");
newnode.innerhtml = "nouvel élément";
document.body.appendChild (newNode);
var newline = document.CreateElement ("br");
Document.Body.ApendChild (Newline);
Remplacer ce code par alerte ("atteindre le bas"); Et vous pouvez voir que lorsque la barre de défilement défile en bas, une ligne "nouvel élément" sera ajoutée en bas de la page. Différents défilements vers le bas, augmentant sans fin.
5. Modifiez l'exemple de code en code lié à Ajax:
La copie de code est la suivante:
<cript>
window.onscroll = function () {
if (getcrolltop () + getClientHeight () == getCrollHeight ()) {
var xmlhttpreq = null;
// IE Browser utilise ActiveX
if (window.activexobject) {
xmlhttpreq = new activeXObject ("Microsoft.xmlhttp");
}
// D'autres navigateurs utilisent l'objet enfant de Windows XMLHttpRequest
else if (window.xmlhttprequest) {
xmlHttpreq = new xmlHttpRequest ();
}
if (xmlhttpreq! = null) {
// définir la demande (pas vraiment ouverte), vrai: signifie asynchrone
xmlhttpreq.open ("get", "/ ajaxtest", true);
// Définit le rappel, lorsque l'état demandé changera, il sera appelé, passant le paramètre xmlhttpreq
xmlhttpreq.onreadystateChange = function () {onajaxTest (xmlHttpreq); };
// soumettre une demande
xmlhttpreq.send (null);
}
}
}
fonction 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.ApendChild (Newline);
}
</cript>
Lorsque la barre de défilement atteint le bas de la page, les nœuds suivants seront ajoutés, comme suit:
2 200
3 200 Ajax OK
4 200 Ajax OK
Ici 2, 3 et 4 sont l'état demandé ReadyState, 200 est l'état de réponse de HTTP, AJAX OK est le texte renvoyé par l'application / ajaxText. Pour plus de détails, veuillez vérifier les documents de référence suivants.
Selon les instructions de documentation de XMLHttpRequest, vous devriez pouvoir imprimer:
0 200
1 200
2 200
3 200 Ajax OK
4 200 Ajax OK
Mais je n'ai pas imprimé les deux états de 0 et 1. Pourquoi est-ce? Est-il pratique pour les passants de faire un grincement?