Компонент Отслеживание скролла
Запускайте события и анимацию при прокрутке вашей страницы. Отслеживание скролла прослушивает (отслеживает) прокрутку страницы и инициирует события на основе позиции прокрутки.
Компонент 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-nav: Параметры
Опции «Scrollspy nav»
При использовании компонента к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой.
| Опция | Значение | По умолчанию | Описание |
|---|---|---|---|
cls |
String | uk-active |
Класс добавляемый к активным ссылкам. |
closest |
Boolean, CSS selector | false |
Цель, к которой будет применяться класс. По умолчанию к самому элементу. |
scroll |
Boolean | false |
Добавляет компонент Scroll к своим ссылкам. |
target |
CSS selector | a[href] |
Определяет целевые якорные элементы, которые следует использовать. |
offset |
Number | 0 |
Верхнее пиксельное смещение после прокрутки. |
scrollspy-nav: JavaScript
Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.
Инициализация Scrollspy nav
UIkit.scrollspyNav(element, options);
События Scrollspy nav
Следующие события будут инициированы для элементов компонента:
| Имя события | Описание |
|---|---|
active |
Срабатывает после того, как элемент становится активным. |