--- title: "React 横スクロールメニューの例——ライブ、コード付き" description: "react-horizontal-scrolling-menu の例：矢印、ドラッグスクロール、スクロール可能なタブ、RTL、縦、無限ループ、自動再生——それぞれコピー＆ペースト可能なソース付き。" canonical: "https://react-horizontal-scrolling-menu.dev/ja/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/ja/examples/simple.md) — 最小のメニュー：項目、2 つの矢印、すぐ使える可視性。 - [1 画面に 1 項目](https://react-horizontal-scrolling-menu.dev/ja/examples/one-item.md) — 1 項目幅のメニュー——1 枚のカードが行を埋めます。 - [一度に 1 項目スクロール](https://react-horizontal-scrolling-menu.dev/ja/examples/one-item-scroll.md) — 矢印がページではなく 1 項目ずつ進めます。 - [メニューの下の矢印](https://react-horizontal-scrolling-menu.dev/ja/examples/bottom-arrows.md) — 矢印はあなたのコンポーネント——どこにでも置けます。 ## 位置とスクロール - [クリックした項目を中央に](https://react-horizontal-scrolling-menu.dev/ja/examples/center-on-click.md) — scrollToItem に inline: center——スクロール可能なタブのパターン。 - [id で項目へスクロール](https://react-horizontal-scrolling-menu.dev/ja/examples/scroll-to-item.md) — apiRef でメニューの外から内部に手を伸ばします。 - [スクロール位置の保存と復元](https://react-horizontal-scrolling-menu.dev/ja/examples/save-restore-position.md) — アンマウントやページ再読み込みをまたいでスクロールオフセットを保持。 - [カスタムスクロールアニメーション](https://react-horizontal-scrolling-menu.dev/ja/examples/custom-transition.md) — プログラムによるスクロールに、独自のイージングと時間を持ち込みます。 - [スクロール進捗インジケーター](https://react-horizontal-scrolling-menu.dev/ja/examples/progress.md) — どの項目が見えているかで動く進捗バー。 ## 入力とジェスチャー - [マウスでドラッグしてスクロール](https://react-horizontal-scrolling-menu.dev/ja/examples/mouse-drag.md) — 項目のクリックを壊さないマウスドラッグ。 - [デスクトップでスワイプ](https://react-horizontal-scrolling-menu.dev/ja/examples/swipe-desktop.md) — マウスユーザー向けの慣性スワイプ。 - [モバイルで矢印を隠す](https://react-horizontal-scrolling-menu.dev/ja/examples/mobile-swipe-only.md) — 小画面ではタッチのみのスクロール、デスクトップでは矢印。 - [本体のスクロールを防ぐ](https://react-horizontal-scrolling-menu.dev/ja/examples/prevent-body-scroll.md) — メニュー上のホイールはページではなくメニューをスクロール。 ## 動的な項目 - [末尾が見えたらさらに読み込む](https://react-horizontal-scrolling-menu.dev/ja/examples/add-items.md) — 最後の項目の可視性で動く無限追加。 - [項目を追加してスクロール](https://react-horizontal-scrolling-menu.dev/ja/examples/add-item-and-scroll-to-it.md) — フィルターチップのパターン：追加して、ビューに引き込みます。 - [項目の出入りをアニメーション](https://react-horizontal-scrolling-menu.dev/ja/examples/items-animation.md) — @formkit/auto-animate による追加/削除アニメーション。 - [5000 項目でも高速](https://react-horizontal-scrolling-menu.dev/ja/examples/performance.md) — ネイティブスクロールはスケールする——仮想化は不要です。 ## レイアウト - [縦メニュー](https://react-horizontal-scrolling-menu.dev/ja/examples/vertical.md) — 同じメニューを、上から下へスクロール。 - [右から左](https://react-horizontal-scrolling-menu.dev/ja/examples/rtl.md) — RTL が方向を反転し、矢印とページングもそれに従います。 ## レシピ - [無限ループ](https://react-horizontal-scrolling-menu.dev/ja/examples/infinite-loop.md) — 公開 API からのシームレスなループ——ライブラリの変更は不要。 - [自動再生](https://react-horizontal-scrolling-menu.dev/ja/examples/autoplay.md) — アクセシブルな一時停止を備えた自動進行ループ。 --- More examples: · Library summary for LLMs: Package: `npm install react-horizontal-scrolling-menu` · MIT ·