Heim >Web-Frontend >js-Tutorial >Wenn die Bildlaufleiste zum Ende der Seite scrollt, wird der js-Code, der Inhalte hinzufügt, automatisch geladen_Javascript-Fähigkeiten
Wenn die Bildlaufleiste zum Ende der Seite scrollt, wird der js-Code, der Inhalte hinzufügt, automatisch geladen_Javascript-Fähigkeiten
- WBOYOriginal
- 2016-05-16 16:48:411384Durchsuche
1. Registrieren Sie das Seiten-Scroll-Ereignis, window.onscroll = function(){ }. 2. Verwandte Funktionen zum Ermitteln der Seitenhöhe, der Bildlaufleistenposition und der Dokumenthöhe:
Code kopieren Der Code lautet wie folgt: //Erhalten Sie die aktuelle Position der Bildlaufleiste
Funktion getScrollTop() { var scrollTop = 0 ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//Holen Sie sich die Höhe des aktuellen Bereichs
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; Ermitteln Sie die vollständige Höhe des Dokuments
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
3 , fügen Sie unten auf der HTML-Seite Code hinzu:
Code kopieren
Der Code lautet wie folgt:
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//Holen Sie sich die Höhe des aktuellen Bereichs
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; Ermitteln Sie die vollständige Höhe des Dokuments
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
3 , fügen Sie unten auf der HTML-Seite Code hinzu:
Code kopieren
Der Code lautet wie folgt:
<script> <div class="codetitle">window.onscroll = function () { <span>if (getScrollTop() getClientHeight() == getScrollHeight()) { <a style="CURSOR: pointer" data="15357" class="copybut" id="copybut15357" onclick="doCopy('code15357')">alert("Reaching the Bottom"); } <u>} </u></script>
4, Beispielcode zum dynamischen Hinzufügen von Seitenelementen:
Kopieren Sie den Code
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); Ersetzen Sie diesen Code durch Alert( „Erreichen Sie das Ende“); Sie können sehen, dass beim Scrollen der Bildlaufleiste nach unten eine Zeile mit „Neues Element“ am unteren Rand der Seite hinzugefügt wird, ohne dass diese weiter erhöht wird Ende. 5, ändern Sie den Beispielcode in Ajax-bezogenen Code:
Kopieren Sie den Code
Der Code lautet wie folgt:
<script> <br>/ /IE-Browser verwendet ActiveX <br>if (window.ActiveXObject) { <br>xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); <div class="codetitle">//Andere Browser verwenden das Unterobjekt von window XMLHttpRequest <span>else if (window.XMLHttpRequest) { <a style="CURSOR: pointer" data="32851" class="copybut" id="copybut32851" onclick="doCopy('code32851')">xmlHttpReq = new XMLHttpRequest(); <u>} </u></a>if (xmlHttpReq != null) { </span>//Legen Sie die Anforderung fest (nicht tatsächlich geöffnet), true: zeigt asynchron an der Parameter xmlHttpReq </div>xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); }; <div class="codebody" id="code32851"> <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>document.body.appendChild( newline); <br>} <br></script>
Wenn die Bildlaufleiste den unteren Rand der Seite erreicht, werden die folgenden Knoten wie folgt hinzugefügt:
2 200
3 200 Ajax ok
4 200 Ajax ok
Hier sind 2, 3 und 4 der Anforderungsstatus „readyState“, 200 ist der Status der http-Antwort, Ajax ok ist der zurückgegebene Text Informationen zur Verwendung durch die /ajaxtext-Anwendung finden Sie in den folgenden Referenzmaterialien.
Laut der XMLHttpRequest-Dokumentation sollten Sie Folgendes ausdrucken können:
0 200
1 200
2 200
3 200 Ajax ok
4 200 Ajax ok
Aber ich habe die beiden Zustände 0 und 1 hier nicht ausgedruckt. Können die Passexperten etwas sagen?
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn