---
title: "Примеры горизонтального меню прокрутки для React — живьём, с кодом"
description: "Примеры react-horizontal-scrolling-menu: стрелки, прокрутка перетаскиванием, прокручиваемые вкладки, RTL, вертикаль, бесконечный цикл, автовоспроизведение — каждый с копируемым исходником."
canonical: "https://react-horizontal-scrolling-menu.dev/ru/examples"
---

# Примеры: каждый паттерн живьём, с полным исходником

> Каждый пример — это работающая демонстрация опубликованного npm-пакета плюс полный файл за ней: готово к копированию и редактируется вживую в Storybook. Рендерится на сервере, как и всё остальное на этом сайте.

Links below point at the Markdown of each example; drop the `.md` for the rendered page.

---

## Основы

- [Начало работы](https://react-horizontal-scrolling-menu.dev/ru/examples/simple.md) — Минимальное меню: элементы, две стрелки, видимость из коробки.
- [Один элемент на экран](https://react-horizontal-scrolling-menu.dev/ru/examples/one-item.md) — Меню шириной в один элемент — одна карточка заполняет ряд.
- [Прокрутка по одному элементу](https://react-horizontal-scrolling-menu.dev/ru/examples/one-item-scroll.md) — Стрелки продвигают один элемент вместо целой страницы.
- [Стрелки под меню](https://react-horizontal-scrolling-menu.dev/ru/examples/bottom-arrows.md) — Стрелки — ваши компоненты, размещайте их где угодно.

## Позиция и прокрутка

- [Центрировать кликнутый элемент](https://react-horizontal-scrolling-menu.dev/ru/examples/center-on-click.md) — scrollToItem с inline: center — паттерн прокручиваемых вкладок.
- [Прокрутить к элементу по id](https://react-horizontal-scrolling-menu.dev/ru/examples/scroll-to-item.md) — Доберитесь до меню извне с помощью apiRef.
- [Сохранение и восстановление позиции прокрутки](https://react-horizontal-scrolling-menu.dev/ru/examples/save-restore-position.md) — Сохраняйте смещение прокрутки между размонтированиями и перезагрузками.
- [Кастомная анимация прокрутки](https://react-horizontal-scrolling-menu.dev/ru/examples/custom-transition.md) — Свой easing и длительность для программной прокрутки.
- [Индикатор прогресса прокрутки](https://react-horizontal-scrolling-menu.dev/ru/examples/progress.md) — Полоса прогресса, управляемая тем, какие элементы видны.

## Ввод и жесты

- [Прокрутка перетаскиванием мышью](https://react-horizontal-scrolling-menu.dev/ru/examples/mouse-drag.md) — Перетаскивание мышью, которое не ломает клики по элементам.
- [Свайп на десктопе](https://react-horizontal-scrolling-menu.dev/ru/examples/swipe-desktop.md) — Свайп с инерцией для пользователей мыши.
- [Скрыть стрелки на мобильных](https://react-horizontal-scrolling-menu.dev/ru/examples/mobile-swipe-only.md) — На малых экранах — только сенсорная прокрутка, на десктопе — стрелки.
- [Заблокировать прокрутку страницы](https://react-horizontal-scrolling-menu.dev/ru/examples/prevent-body-scroll.md) — Колесо над меню прокручивает меню, а не страницу.

## Динамические элементы

- [Подгружать, когда виден конец](https://react-horizontal-scrolling-menu.dev/ru/examples/add-items.md) — Бесконечное добавление, управляемое видимостью последнего элемента.
- [Добавить элемент и прокрутить к нему](https://react-horizontal-scrolling-menu.dev/ru/examples/add-item-and-scroll-to-it.md) — Паттерн чипов-фильтров: добавить, затем привести в видимость.
- [Анимация появления и исчезновения элементов](https://react-horizontal-scrolling-menu.dev/ru/examples/items-animation.md) — Анимации добавления/удаления с @formkit/auto-animate.
- [5000 элементов — и всё равно быстро](https://react-horizontal-scrolling-menu.dev/ru/examples/performance.md) — Нативная прокрутка масштабируется — виртуализация не нужна.

## Раскладка

- [Вертикальное меню](https://react-horizontal-scrolling-menu.dev/ru/examples/vertical.md) — То же меню, прокручивается сверху вниз.
- [Справа налево](https://react-horizontal-scrolling-menu.dev/ru/examples/rtl.md) — RTL меняет направление; стрелки и пагинация следуют.

## Рецепты

- [Бесконечный цикл](https://react-horizontal-scrolling-menu.dev/ru/examples/infinite-loop.md) — Бесшовный цикл на публичном API — без изменений в библиотеке.
- [Автовоспроизведение](https://react-horizontal-scrolling-menu.dev/ru/examples/autoplay.md) — Само-продвигающийся цикл с доступным поведением паузы.

---
More examples: <https://react-horizontal-scrolling-menu.dev/ru/examples.md> · Library summary for LLMs: <https://react-horizontal-scrolling-menu.dev/llms.txt>
Package: `npm install react-horizontal-scrolling-menu` · MIT · <https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu>