Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
2 мин
887

Управление прокруткой div с помощью JavaScript

Существует типичная задача, когда у нас есть div элемент с ограниченной высотой, который содержит большое количество динамически добавляемого контента.

Существует типичная задача, когда у нас есть div элемент с ограниченной высотой, который содержит большое количество динамически добавляемого контента. Примером может служить чат-окно на веб-сайте, где новые сообщения постоянно добавляются в нижнюю часть. Особенностью такого окна является то, что оно всегда автоматически прокручивается до самого низа при появлении нового сообщения. Однако, если пользователь решает просмотреть предыдущие сообщения и прокручивает вверх, прокрутка до новых сообщений должна быть приостановлена. Только после того, как пользователь самостоятельно прокрутит окно до самого низа, автоматическая прокрутка возобновляется.

Решить эту задачу можно с помощью JavaScript. Предположим, что у нас есть div элемент с идентификатором «chatBox». Для начала, нужно написать функцию, которая будет прокручивать div до нижнего края.

function scrollToBottom(elementId) {
    var div = document.getElementById(elementId);
    div.scrollTop = div.scrollHeight;
}

Эта функция использует свойство scrollTop для установки вертикальной позиции прокрутки и свойство scrollHeight для получения полной высоты элемента вместе с прокручиваемым контентом.

Затем, нужно написать обработчик события для отслеживания прокрутки пользователя. Если пользователь прокручивает вверх, автоматическая прокрутка должна быть отключена. Если пользователь прокручивает вниз и достигает нижнего края, автоматическая прокрутка должна быть включена.

var autoScroll = true;

document.getElementById('chatBox').addEventListener('scroll', function() {
    var scrollTop = this.scrollTop;
    var scrollHeight = this.scrollHeight;
    var height = this.clientHeight;

    if (autoScroll) {
        if (scrollTop < scrollHeight - height) {
            autoScroll = false;
        }
    } else {
        if (scrollTop + height >= scrollHeight) {
            autoScroll = true;
        }
    }
});

Этот код проверяет, если значение scrollTop меньше разности между scrollHeight и height, значит пользователь прокрутил вверх и автоматическая прокрутка отключается. Если значение scrollTop плюс height больше или равно scrollHeight, значит пользователь прокрутил до нижнего края и автоматическая прокрутка включается.

Наконец, когда добавляется новое сообщение, нужно проверить значение autoScroll. Если оно true, вызывается функция scrollToBottom.

function addMessage(message) {
    var div = document.getElementById('chatBox');
    div.innerHTML += message;

    if (autoScroll) {
        scrollToBottom('chatBox');
    }
}

В этом коде предполагается, что функция addMessage вызывается при добавлении нового сообщения в чат. Она добавляет сообщение в div и проверяет значение autoScroll. Если autoScroll равно true, вызывается функция scrollToBottom и div прокручивается до нижнего края.

Добавить комментарий

Подарок
Забрать подарок