1. Enregistrez l'événement de défilement de page, window.onscroll = function(){ };
2. Fonctions associées pour obtenir la hauteur de la page, la position de la barre de défilement et la hauteur du document :
//Obtenir la position actuelle de la barre de défilement
fonction getScrollTop() {
var scrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop
}
else if (document.body) {
scrollTop = document. body.scrollTop;
}
return scrollTop;
//Obtenir la hauteur de la plage actuelle
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
}
// Obtenez la hauteur complète du document
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}
3); , ajoutez le code en bas de la page html :
<script> <div class="codebody" id="code15357">window.onscroll = function () { <br>if (getScrollTop() getClientHeight() == getScrollHeight()) { <br>alert("Atteindre le bas"); } <br>} <br></script>
De cette façon, l'alerte ("bas atteint") sera déclenchée lorsque la barre de défilement atteint le bas de la page. La prochaine chose à faire est de remplacer la fonction déclenchée par un appel ajax et d'ajouter dynamiquement du contenu à la page.
4, exemple de code pour ajouter dynamiquement des éléments de page :
newnode.setAttribute("href", "#");
newnode.innerHTML = "nouvel élément"; >document.body .appendChild(newnode);
var newline = document.createElement("br");
document.body.appendChild(newline);
Remplacez ce code par alert( "Atteindre le bas");, vous pouvez voir que lorsque la barre de défilement défile vers le bas, une ligne de "nouvel élément" sera ajoutée au bas de la page. Contrairement au défilement vers le bas, elle continuera à augmenter sans. fin.
5, modifiez l'exemple de code en code associé à l'ajax :
Copiez le code
Le code est le suivant : <script> </span>window.onscroll = function () { </div>if (getScrollTop() getClientHeight() == getScrollHeight()) { <div class="codebody" id="code32851">var xmlHttpReq = null; <br>/ /Le navigateur IE utilise ActiveX <br>if (window.ActiveXObject) { <br>xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); <br>} <br>//D'autres navigateurs utilisent le sous-objet de window XMLHttpRequest <br>else if (window.XMLHttpRequest) { <br>xmlHttpReq = new XMLHttpRequest(); <br>} <br><br>if (xmlHttpReq != null) { <br>//Définissez la requête (non réellement ouvert) , true : indique un <br>xmlHttpReq.open("GET", "/ajaxtest" asynchrone); <br>//Définit le rappel Lorsque l'état de la requête change, elle sera appelée, en passant. le paramètre xmlHttpReq <br>xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq }; <br>//Soumettre la demande<br>xmlHttpReq.send(null); <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"); newline); <br>} <br></script>
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 le statut de la demande readyState, 200 est le statut de la réponse http, ajax ok est le texte renvoyé par l'application /ajaxtext, veuillez consulter les documents de référence suivants pour plus de détails.
D'après la documentation 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 ici. Pourquoi les experts de passage peuvent-ils dire quelque chose ?
barre de défilement div
Comment définir le style de la barre de défilement HTML
Comment résoudre l'échec DNS
base de données de connexion jndi
numéro de série Photoshop CS5
Principales utilisations du système d'exploitation Linux
Quels sont les algorithmes de cryptage GSM ?
Fonctions de la commande tracert
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
