---
title: "React 横向滚动菜单示例——在线可运行，附代码"
description: "react-horizontal-scrolling-menu 的示例：箭头、拖拽滚动、可滚动标签页、RTL、垂直、无限循环、自动播放——每个都附可复制粘贴的源码。"
canonical: "https://react-horizontal-scrolling-menu.dev/zh-cn/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/zh-cn/examples/simple.md) — 最小菜单：项目、两个箭头，开箱即用的可见性。
- [每屏一个项目](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/one-item.md) — 单项宽的菜单——一张卡片占满整行。
- [一次滚动一个项目](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/one-item-scroll.md) — 箭头一次前进一个项目，而非一整页。
- [箭头置于菜单下方](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/bottom-arrows.md) — 箭头是你的组件——放在哪里都行。

## 位置与滚动

- [让点击的项目居中](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/center-on-click.md) — scrollToItem 配 inline: center——可滚动标签页模式。
- [按 id 滚动到项目](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/scroll-to-item.md) — 用 apiRef 从外部触达菜单。
- [保存与恢复滚动位置](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/save-restore-position.md) — 在卸载与页面重载之间保持滚动偏移。
- [自定义滚动动画](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/custom-transition.md) — 为程序化滚动自备缓动与时长。
- [滚动进度指示器](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/progress.md) — 由可见项目驱动的进度条。

## 输入与手势

- [用鼠标拖拽滚动](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/mouse-drag.md) — 鼠标拖拽的同时不破坏项目点击。
- [桌面端滑动](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/swipe-desktop.md) — 面向鼠标用户的惯性滑动。
- [移动端隐藏箭头](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/mobile-swipe-only.md) — 小屏仅触摸滚动，桌面端保留箭头。
- [阻止页面滚动](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/prevent-body-scroll.md) — 滚轮划过菜单时滚动菜单，而非页面。

## 动态项目

- [到达末尾时加载更多](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/add-items.md) — 由最后一个项目的可见性驱动的无限追加。
- [添加项目并滚动到它](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/add-item-and-scroll-to-it.md) — 筛选标签模式：先追加，再滚入可视区。
- [项目的进出动画](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/items-animation.md) — 用 @formkit/auto-animate 实现增删动画。
- [5000 个项目依然流畅](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/performance.md) — 原生滚动可扩展——这里无需虚拟化。

## 布局

- [垂直菜单](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/vertical.md) — 同一个菜单，自上而下滚动。
- [从右到左](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/rtl.md) — RTL 翻转方向；箭头与分页随之改变。

## 配方

- [无限循环](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/infinite-loop.md) — 来自公开 API 的无缝循环——无需改动库。
- [自动播放](https://react-horizontal-scrolling-menu.dev/zh-cn/examples/autoplay.md) — 带无障碍暂停行为的自动前进循环。

---
More examples: <https://react-horizontal-scrolling-menu.dev/zh-cn/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>