Компонент Отслеживание скролла Scrollspy

Запускайте события и анимацию при прокрутке вашей страницы. Отслеживание скролла прослушивает (отслеживает) прокрутку страницы и инициирует события на основе позиции прокрутки.

Компонент Scrollspy (Отслеживание скролла) прослушивает, отслеживает прокрутку страницы и инициирует события на основе позиции прокрутки. Например, если вы прокручиваете страницу вниз, и элемент впервые появляется в области просмотра, вы можете активировать плавную анимацию с постепенным появлением.

Руководство

Отслеживание прокрутки

Для начала использования добавьте к элементу атрибут uk-scrollspy.

Как правило, классы из компонента Анимация используются вместе с компонентом Scrollspy.

<div uk-scrollspy="cls:uk-animation-fade"></div>
  • Left

    Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми правилами.

    Right

    Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад.

  • <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
                <h3 class="uk-card-title">Left</h3>
                <p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми правилами.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
                <h3 class="uk-card-title">Right</h3>
                <p>Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад.</p>
            </div>
        </div>
    </div>

В этом примере используется опция repeat: true. Прокрутите вверх, а затем вниз, чтобы увидеть запущенную анимацию. Примеры созданы с использованием компонента Карточка.

Группы

Вы также можете группировать элементы scrollspy, в связи с этим вам не придется применять атрибут к каждому из них. Просто добавьте атрибут uk-scrollspy="target: SELECTOR" к элементу контейнера, нацелив его на селектор элементов, которые вы хотите анимировать внутри контейнера. При использовании задержки она будет применена кумулятивно к элементам, которые прокручиваются в поле зрения.

<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div></div>
    <div></div>
</div>
  • Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

    Fade

    Когда от милой моей долины поднимается солнце UIkit 3.

  • <div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 500; repeat: true">
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Fade</h3>
                <p>Когда от милой моей долины поднимается солнце UIkit 3.</p>
            </div>
        </div>
    </div>

Переопределить опцию

Установить для цели опцию cls

Вы также можете дать каждой цели отдельную опцию cls. Просто добавьте к целевому элементу атрибут uk-scrollspy-class="CLASS". Он переопределит опцию cls, установленную для компонента.

<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div uk-scrollspy-class="uk-animation-slide-top"></div>
    <div uk-scrollspy-class="uk-animation-slide-bottom"></div>
</div>
  • Bottom

    Ему так просто было заказать для нее катер, но он это делать.

    Top

    Ему так просто было заказать для нее катер, но он это делать.

    Bottom

    Ему так просто было заказать для нее катер, но он это делать.

  • <div class="uk-child-width-1-3@m uk-grid-small" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Bottom</h3>
                <p>Ему так просто было заказать для нее катер, но он это делать.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
                <h3 class="uk-card-title">Top</h3>
                <p>Ему так просто было заказать для нее катер, но он это делать.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">Bottom</h3>
                <p>Ему так просто было заказать для нее катер, но он это делать.</p>
            </div>
        </div>
    </div>

Параметры для атрибута

При использовании компонента Scrollspy к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опции компонента

Опция Значение По умолчанию Описание
cls String Класс для переключения, когда элемент входит / покидает область просмотра.
target Boolean, CSS selector false Цель, к которой будет применен scrollspy. По умолчанию к самому элементу.
hidden Boolean true Скрывает элемент, находясь вне поля зрения.
margin String -1px Поле добавляется к ограничивающей рамке области просмотра перед вычислением пересечения с элементом. Значение должно быть в px или %.
repeat Boolean false Применяет класс cls каждый раз, когда элемент находится в поле зрения.
delay Number 0 Время задержки в мс.

cls является Primary опцией. Если cls это единственный параметр в значении атрибута, то её ключ можно не использовать.

<span uk-scrollspy="my-class"></span>

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

Инициализация

UIkit.scrollspy(element, options);

События

Следующие события будут инициированы для элементов компонента «Scrollspy»:

Имя события Описание
inview Срабатывает после того, как элемент перемещается в окно просмотра.
outview Срабатывает после того, как элемент выходит из области просмотра.

Scrollspy Nav

Чтобы автоматически "обновить" активный пункт меню в зависимости от позиции прокрутки вашего сайта, добавьте атрибут uk-scrollspy-nav к любой навигации. Каждый пункт меню должен содержать ссылку на идентификатор (ID) соответствующей части сайта.

<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
Для примера навигации scrollspy просто посмотрите на фиксированную навигацию в правой части тестовой страницы.

Опции «Scrollspy nav»

При использовании компонента к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой.

Опция Значение По умолчанию Описание
cls String uk-active Класс добавляемый к активным ссылкам.
closest Boolean, CSS selector false Цель, к которой будет применяться класс. По умолчанию к самому элементу.
scroll Boolean false Добавляет компонент Scroll к своим ссылкам.
overflow Boolean true Если для параметра overflow установлено значение true, первый или последний элемент останется активным, если находится над или под навигацией.
offset Number 0 Верхнее пиксельное смещение после прокрутки.

JavaScript «Scrollspy nav»

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

Инициализация Scrollspy nav

UIkit.scrollspyNav(element, options);

События Scrollspy nav

Следующие события будут инициированы для элементов компонента:

Имя события Описание
active Срабатывает после того, как элемент становится активным.