ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Categories:

JavaScript: бесконечная страница

Решил задачу «Бесконечная страница» к подразделу 3.6 «Прокрутка» второй части учебника по JavaScript.

По условиям задачи требуется обеспечить бесконечную прокрутку HTML-страницы по вертикали вниз. По достижении конца HTML-страницы при ее прокрутке вниз наш скрипт должен добавлять к HTML-странице текущие дату и время. В результате этого добавления высота HTML-страницы увеличится, и можно будет еще немного прокрутить HTML-страницу вниз. Затем снова произойдет добавление к HTML-странице текущих даты и времени. И так далее.

В теле заданной HTML-страницы (в песочнице) содержится лишь HTML-элемент h1 (заголовок), содержащий текст «Прокрути меня». (Еще там содержится HTML-элемент script, но, так как он не отображается в браузере, в данном случае его присутствие не имеет значения.)

Я открыл эту HTML-страницу в своем браузере. Окно моего браузера обычно развернуто на весь экран компьютера (у меня — десктоп, то есть настольный компьютер). Очевидно, что высота HTML-страницы оказалась меньше высоты области просмотра браузера. В этом случае, по умолчанию, вертикальная полоса прокрутки HTML-страницы отсутствует. Следовательно, мы никак не можем выполнить вертикальную прокрутку. А нам нужно ее выполнить.

Что делать? Я решил в своем скрипте сначала увеличить высоту HTML-страницы, добавив в нее столько строк с текущими датой и временем, сколько потребуется, чтобы высота HTML-страницы превысила высоту области просмотра браузера. При этом должна автоматически появиться вертикальная полоса прокрутки HTML-страницы. Пишем код:
// высота HTML-страницы
let htmlHeight = document.documentElement.offsetHeight;
// высота клиентской части области просмотра браузера
let viewportHeight = document.documentElement.clientHeight;

// добавляем текущие дату и время в тело HTML-страницы,
// пока ее высота не станет больше высоты области просмотра браузера
while (htmlHeight <= viewportHeight) {
    let p = document.createElement("p"); // создаем параграф с текущими датой и временем
    p.innerHTML = new Date();            // и добавляем его в тело HTML-страницы
    document.body.append(p);
                                         // заново определяем высоту HTML-страницы
    htmlHeight = document.documentElement.offsetHeight;
}

(При определении высоты HTML-страницы в скрипте на языке JavaScript следует внимательно следить за стилями HTML-элементов, описанными на языке CSS. Некоторые указания в стилях на языке CSS могут повлиять на работу свойств объектов в JavaScript. Например, если описать для HTML-элемента html стиль html {height: 100%;}, то высота HTML-элемента html всегда будет равна высоте области просмотра браузера, независимо от содержания HTML-элемента html. То есть свойство offsetHeight для этого HTML-элемента постоянно будет равно свойству clientHeight, даже если в браузере мы наблюдаем, что содержимое HTML-элемента html (например, какой-то текст в теле HTML-страницы) занимает меньше высоты области просмотра браузера или, наоборот, больше высоты области просмотра браузера. Это будет показано на практике в следующем посте.)

У меня этот код сработал так, как я и планировал. Первоначально у меня в браузере (развернутом на весь экран компьютера) высота заданной HTML-страницы (с одним заголовком «Прокрути меня») составляет 80 пикселей, а высота клиентской части (то есть за вычетом места, которое занимает горизонтальная полоса прокрутки, если она присутствует) области просмотра браузера составляет 891 пиксель. Описанный выше скрипт добавляет в тело заданной HTML-страницы 24 параграфа с текущими датой и временем, после чего высота HTML-страницы становится равной 896 пикселям. Так как в результате высота HTML-страницы (896 пикселей) стала больше, чем высота клиентской части области просмотра браузера (891 пиксель), то автоматически появилась вертикальная полоса прокрутки.

Теперь нужно отловить момент, когда пользователь прокрутит полученную HTML-страницу вниз до конца. Для этого повесим функцию-обработчик на событие scroll на окне браузера window. Дополним вышеописанный код. Я не будут переписывать заново описанную выше часть, чтобы не увеличивать понапрасну размер поста, просто буду иметь в виду, что нижеописанный код добавляется к вышеописанному.
window.addEventListener("scroll", function() {
    //...
});

По мере прокрутки HTML-страницы вниз браузер будет генерировать множество событий scroll. При этом будет увеличиваться сдвиг HTML-страницы pageYOffset. Как определить, что HTML-страница сдвинута вниз до самого конца? Сдвиг HTML-страницы pageYOffset должен стать равен максимально возможному сдвигу HTML-страницы при текущей высоте HTML-страницы и текущей высоте клиентской части области просмотра браузера. Этот максимальный сдвиг я обозначил идентификатором maxYOffset. Дополним код:
window.addEventListener("scroll", function() {

    // максимально возможный на данный момент сдвиг HTML-страницы по вертикали
    let maxYOffset = document.documentElement.offsetHeight -
                     document.documentElement.clientHeight;
    
    // если достигнут максимально возможный сдвиг,
    if (pageYOffset == maxYOffset) {
        let p = document.createElement("p"); // создаем параграф с текущими датой и временем
        p.innerHTML = new Date();            // и добавляем его в тело HTML-страницы
        document.body.append(p);
    }

});

Вот и всё. Этот скрипт у меня работает: при прокрутке HTML-страницы вниз бесконечно добавляются параграфы с текущими датой и временем.
Tags: Образование, Программирование
Subscribe

Recent Posts from This Journal

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments