1. Зарегистрируйте событие прокрутки страницы, window.onscroll = function () {};
2. Связанные функции, чтобы получить высоту страницы, позицию стержня прокрутки и высоту документа:
Кода -копия выглядит следующим образом:
// Получить текущую позицию прокрутки
функция getScrolltop () {
var scrolltop = 0;
if (document.documentelement && document.documentelement.scrolltop) {
scrolltop = document.documentelement.scrolltop;
}
иначе if (document.body) {
scrolltop = document.body.scrolltop;
}
вернуть Scrolltop;
}
// Получить высоту текущего диапазона
функция getClientHeight () {
var clientHeight = 0;
if (document.body.clientheight && document.documentelement.clientheight) {
clientHeight = math.min (document.body.clientheight, document.documentelement.clientheight);
}
еще {
clientHeight = math.max (document.body.clientheight, document.documentelement.clientheight);
}
вернуть клиент -вершина;
}
// Получить полную высоту документа
функция getscrollheight () {
return math.max (document.body.scrollheight, document.documentelement.scrollheight);
}
3. Добавьте код в нижней части страницы HTML:
Кода -копия выглядит следующим образом:
<Скрипт>
window.onscroll = function () {
if (gescrolltop () + getClientHeight () == getScrollheight ()) {
оповещение («добраться до дна»);
}
}
</script>
Это запустит оповещение («достичь внизу»), когда полоса прокрутки достигнет нижней части страницы. То, что вам нужно сделать дальше, это изменить запускаемую функцию на вызов Ajax и динамически добавить контент на страницу.
4. Пример кода для динамического добавления элементов страницы:
Кода -копия выглядит следующим образом:
var newnode = document.createElement ("a");
newnode.setattribute ("href", "#");
newNode.innerhtml = "новый элемент";
document.body.appendchild (newnode);
var newline = document.createElement ("br");
document.body.appendchild (newline);
Заменить этот код на предупреждение («Достигнуть дно»); И вы можете видеть, что когда прокрутка прокрутки прокручивается внизу, в нижней части страницы будет добавлена строка «новый элемент». Разное прокручивать вниз, постоянно, непрерывно, бесконечно.
5. Измените пример кода на код, связанный с AJAX:
Кода -копия выглядит следующим образом:
<Скрипт>
window.onscroll = function () {
if (gescrolltop () + getClientHeight () == getScrollheight ()) {
var xmlhttpreq = null;
// IE Browser использует ActiveX
if (window.activexobject) {
xmlhttpreq = new activexobject ("microsoft.xmlhttp");
}
// другие браузеры используют детский объект Window xmlhttprequest
else if (window.xmlhttprequest) {
xmlhttpreq = new xmlhttprequest ();
}
if (xmlhttpreq! = null) {
// Установить запрос (не очень открытый), true: означает асинхронный
xmlhttpreq.open ("get", "/ajaxtest", true);
// Установить обратный вызов, когда запрашиваемое состояние изменится, оно будет вызвано, передавая параметр xmlhtpreq
xmlhttpreq.onreadystatechange = function () {onajaxtest (xmlhttpreq); };
// отправить запрос
xmlhttpreq.send (null);
}
}
}
функция 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>
Когда стержень прокрутки достигает нижней части страницы, будут добавлены следующие узлы следующим образом:
2 200
3 200 Ajax OK
4 200 ajax ok
Здесь 2, 3 и 4 - запрошенное состояние Государства, 200 - статус ответа HTTP, Ajax OK - это текст, возвращаемый приложением /AjaxText. Для получения подробной информации, пожалуйста, проверьте следующие справочные материалы.
В соответствии с инструкциями по документации Xmlhttprequest, вы должны быть в состоянии распечатать:
0 200
1 200
2 200
3 200 Ajax OK
4 200 ajax ok
Но я не распечатал два состояния 0 и 1. Почему это? Удобно ли для прохожих сделать скрип?