run-dev

scroll в JavaScript: управление прокруткой страницы в JS

scroll — это событие и набор методов в JavaScript, с помощью которых можно управлять прокруткой веб-страницы или отдельного элемента. Работа со скроллом позволяет создавать эффекты, следить за положением страницы и реализовывать функции вроде “Кнопка наверх” или “Бесконечная прокрутка”.

Отслеживание события scroll

Событие scroll срабатывает при каждом изменении положения прокрутки:

window.addEventListener('scroll', () => {
    console.log('Страница прокручивается');
});

Если нужно следить за прокруткой конкретного элемента, событие вешается на него:

const container = document.getElementById('scrollable');
container.addEventListener('scroll', () => {
    console.log('Контейнер прокручивается');
});

Получение текущей позиции прокрутки

Для всей страницы

Горизонтальная прокрутка:

const scrollX = window.scrollX; // или window.pageXOffset

Вертикальная прокрутка:

const scrollY = window.scrollY; // или window.pageYOffset

Для элемента

const element = document.getElementById('scrollable');
const scrollTop = element.scrollTop;
const scrollLeft = element.scrollLeft;

Прокрутка к определенной позиции

Прокрутка окна

window.scrollTo({
    top: 500,
    behavior: 'smooth' // плавная прокрутка
});

Прокрутка элемента

element.scrollTo({
    top: 200,
    behavior: 'smooth'
});

Прокрутка относительно текущей позиции

window.scrollBy({
    top: 100,
    behavior: 'smooth'
});

Прокрутка к элементу

Метод scrollIntoView позволяет прокрутить страницу так, чтобы элемент оказался в видимой области:

const section = document.getElementById('section');
section.scrollIntoView({ behavior: 'smooth', block: 'start' });

Проверка, достигнут ли конец страницы

window.addEventListener('scroll', () => {
    const scrolledToBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight;
    if (scrolledToBottom) {
        console.log('Достигнут конец страницы');
    }
});

Отключение прокрутки страницы

Иногда нужно полностью запретить прокрутку:

document.body.style.overflow = 'hidden';

Чтобы вернуть прокрутку обратно:

document.body.style.overflow = '';

Управление прокруткой в JavaScript — это важная часть создания современных веб-интерфейсов. Оно позволяет контролировать поведение страницы при загрузке, реализовывать эффектные анимации, улучшать пользовательский опыт при навигации и работать с ленивой загрузкой контента.

Больше записей