Прокрутка страницы

Библиотека Zepto.js обеспечивает легкий и удобный интерфейс для работы с DOM и событиями, включая управление прокруткой страницы. Работа с прокруткой включает получение текущей позиции, программное перемещение и обработку событий скролла.

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

Zepto позволяет легко определить, сколько пикселей страница прокручена по вертикали или горизонтали. Основные методы:

var scrollTop = $(window).scrollTop();  // вертикальная прокрутка
var scrollLeft = $(window).scrollLeft(); // горизонтальная прокрутка

scrollTop() возвращает текущее смещение от верхней границы страницы.
scrollLeft() возвращает смещение от левого края документа.

Эти методы полезны для создания эффектов «липких» элементов, динамического подгрузки контента или анимации при прокрутке.

Программная прокрутка страницы

Для плавного или мгновенного перемещения страницы Zepto использует метод scrollTop с аргументом:

// мгновенная прокрутка к 500px
$(window).scrollTop(500);

// плавная прокрутка с анимацией
$('html, body').animate({ scrollTop: 500 }, 800);

Передача числа устанавливает новую позицию вертикальной прокрутки.
Метод animate позволяет задавать время анимации, создавая эффект плавного перемещения.
Использование $('html, body') важно для совместимости с разными браузерами, так как некоторые применяют прокрутку к <html>, другие — к <body>.

Обработка события прокрутки

Zepto позволяет подписываться на события скролла, что полезно для динамического обновления интерфейса:

$(window).on('scroll', function() {
    var scrollTop = $(window).scrollTop();
    console.log('Позиция прокрутки:', scrollTop);
});

Особенности:

Событие scroll срабатывает часто, при каждом пикселе прокрутки, поэтому для сложных операций рекомендуется использовать дебаунсинг или троттлинг.
Можно комбинировать с requestAnimationFrame для оптимизации производительности:

var ticking = false;

$(window).on('scroll', function() {
    if (!ticking) {
        window.requestAnimationFrame(function() {
            var scrollTop = $(window).scrollTop();
            // обработка прокрутки
            ticking = false;
        });
        ticking = true;
    }
});

Работа с якорями и прокруткой к элементам

Zepto позволяет программно прокручивать страницу к определенному элементу:

var targetOffset = $('#section2').offset().top;
$('html, body').animate({ scrollTop: targetOffset }, 600);

Метод offset() возвращает позицию элемента относительно документа: { top, left }.
Такой подход используется для создания плавной навигации по разделам страницы.

Прокрутка и динамический контент

При добавлении контента динамически важно учитывать изменение высоты документа. Методы прокрутки остаются актуальными, так как Zepto всегда берет текущую позицию окна и позицию элементов на странице при вызове scrollTop() или offset().

Для элементов с прокруткой внутри контейнера:

var container = $('#scrollable');
var containerScroll = container.scrollTop();
container.scrollTop(containerScroll + 100); // прокрутка на 100px вниз

Это работает аналогично глобальной прокрутке, но применяется к конкретному блоку с overflow: auto или scroll.

Комбинированные эффекты

Zepto позволяет комбинировать прокрутку с другими анимациями и событиями:

$('#button').on('click', function() {
    $('html, body').animate({ scrollTop: 0 }, 500, function() {
        alert('Возврат к началу завершен');
    });
});

Можно использовать колбэки для выполнения действий после завершения анимации.
Это удобно для реализации кнопки «Наверх» или автоматической прокрутки после AJAX-загрузки.