--- metadata: - name: generator content: Diplodoc Platform v5.70.0 alternate: - https://divkit.tech/docs/en/concepts/collection-navigation.md - https://divkit.tech/docs/ru/concepts/collection-navigation.md - href: https://divkit.tech/docs/ru/concepts/collection-navigation.md type: text/markdown title: Markdown version - href: https://divkit.tech/docs/ru/llms.txt?revision=r22102947 rel: describedby --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt?revision=r22102947 # Навигация по коллекциям и скролл Действия на этой странице переключают текущий элемент и управляют скроллом в [gallery](https://divkit.tech/docs/ru/concepts/divs/2/div-gallery.md), [pager](https://divkit.tech/docs/ru/concepts/divs/2/div-pager.md) и [tabs](https://divkit.tech/docs/ru/concepts/divs/2/div-tabs.md). ## Переключение элементов {#switch-elements} Для навигации внутри [gallery](https://divkit.tech/docs/ru/concepts/divs/2/div-gallery.md), [pager](https://divkit.tech/docs/ru/concepts/divs/2/div-pager.md) и [tabs](https://divkit.tech/docs/ru/concepts/divs/2/div-tabs.md) укажите действие: - `set_current_item` — для текущего элемента; - `set_next_item` — для следующего элемента; - `set_previous_item` — для предыдущего элемента. ```translate=no div-action://set_current_item?id=&item= div-action://set_next_item?id=&overflow= div-action://set_previous_item?id=&overflow= ``` #| || **Параметр** | **Описание** || || `id` | Идентификатор элемента, в котором нужно переключить текущий. || || `item` | Номер элемента, до которого необходимо проскроллить. || || `overflow` | Указывает, как будет происходить навигация при достижении граничных элементов: - `clamp` — переход остановится на граничном элементе (значение по умолчанию); - `ring` — произойдет переход в начало или конец в зависимости от текущего элемента. || |# ### Переход в начало или конец gallery Для перехода в начало или конец [gallery](https://divkit.tech/docs/ru/concepts/divs/2/div-gallery.md) укажите действие: ```translate=no div-action://scroll_to_start?id= div-action://scroll_to_end?id= ``` #| || **Параметр** | **Описание** || || `id` | Идентификатор элемента, в котором нужно переключить текущий. || |# Если элементы внутри `gallery` будут больше, чем размер галлереи, то действие `scroll_to_end` проскроллит ее до конца последнего элемента. ### Скролл gallery на несколько dp вперед или назад, а также до конкретного значения Для скролла [gallery](https://divkit.tech/docs/ru/concepts/divs/2/div-gallery.md) вперед или назад укажите действие: ```translate=no div-action://scroll_forward?id=&step=&overflow= div-action://scroll_backward?id=&step=&overflow= ``` Для скролла [gallery](https://divkit.tech/docs/ru/concepts/divs/2/div-gallery.md) к конкретному значению dp укажите действие: ```translate=no div-action://scroll_to_position?id=&step= ``` #| || **Параметр** | **Описание** || || `id` | Идентификатор элемента, в котором нужно переключить текущий. || || `step` | Позиция в единицах [dp](https://en.wikipedia.org/wiki/Device-independent_pixel), до которой нужно проскроллить или на сколько нужно проскроллить галерею, в зависимости от действия. || || `overflow` | Указывает, как будет происходить навигация при достижении граничных элементов: - `clamp` — переход остановится на граничном элементе (значение по умолчанию); - `ring` — произойдет переход в начало или конец в зависимости от текущего элемента. || |# ## Типизированные действия scroll_to и scroll_by {#typed-scroll} Те же переходы можно описать типизированными действиями [scroll_to](https://divkit.tech/docs/ru/concepts/divs/2/div-action-scroll-to.md) и [scroll_by](https://divkit.tech/docs/ru/concepts/divs/2/div-action-scroll-by.md). У обоих есть параметры `id` (идентификатор элемента, в котором выполняется скролл), `animated` (включает анимацию, по умолчанию `true`) и `duration`. Действие `scroll_to` переходит к точке, заданной в параметре `destination`: #| || **Значение `type`** | **Описание** || || `index` | Элемент с индексом, указанным в `value`. || || `item_id` | Дочерний элемент с идентификатором, указанным в `value`. Поддерживается на Android и в Web. || || `offset` | Позиция в dp от начала контейнера, указанная в `value`. Применимо только в `gallery`. || || `start` | Начало контейнера. || || `end` | Конец контейнера. || |# Действие `scroll_by` пролистывает контейнер от текущей позиции на `item_count` элементов или на `offset` dp (только в `gallery`). Отрицательные значения пролистывают назад. Параметр `overflow` задает поведение на границе контейнера: `clamp` (по умолчанию) или `ring`. ### Длительность скролла {#scroll-duration} В типизированных действиях [scroll_to](https://divkit.tech/docs/ru/concepts/divs/2/div-action-scroll-to.md) и [scroll_by](https://divkit.tech/docs/ru/concepts/divs/2/div-action-scroll-by.md) параметр `duration` задает длительность анимации в миллисекундах. Значение должно быть целым неотрицательным числом. Без `duration` используется стандартная анимация платформы; при `duration: 0` или `animated: false` скролл выполняется мгновенно. Например, переход к третьему элементу галереи за 500 мс: ```json { "log_id": "scroll_to_item", "typed": { "type": "scroll_to", "id": "my_gallery", "destination": {"type": "index", "value": 2}, "duration": 500 } } ``` Для перехода относительно текущего элемента используйте `scroll_by` с `item_count`. Например, на одну страницу вперед без анимации: ```json { "log_id": "scroll_by_instant", "typed": { "type": "scroll_by", "id": "my_pager", "item_count": 1, "duration": 0 } } ``` ## Многостраничный скролл в pager {#multi-page-scroll} Установите `multi_page_scroll: true`, чтобы скроллить несколько страниц [pager](https://divkit.tech/docs/ru/concepts/divs/2/div-pager.md) одним свайпом. По умолчанию значение равно `false`. Параметр не влияет на программный скролл. Для циклического скролла включите также `infinite_scroll`. ```json { "type": "pager", "id": "multi_page_pager", "layout_mode": { "type": "fixed", "neighbour_page_width": { "type": "fixed", "value": 0 } }, "multi_page_scroll": true, "infinite_scroll": true, "items": [ { "type": "text", "text": "Страница 1" }, { "type": "text", "text": "Страница 2" }, { "type": "text", "text": "Страница 3" } ] } ``` ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)