--- title: "React 가로 스크롤 메뉴 예제 — 라이브, 코드 포함" description: "react-horizontal-scrolling-menu 예제: 화살표, 드래그 스크롤, 스크롤 가능한 탭, RTL, 세로, 무한 루프, 자동 재생 — 각각 복사-붙여넣기 가능한 소스 포함." canonical: "https://react-horizontal-scrolling-menu.dev/ko/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/ko/examples/simple.md) — 최소 메뉴: 항목, 두 개의 화살표, 바로 쓸 수 있는 가시성. - [화면당 항목 하나](https://react-horizontal-scrolling-menu.dev/ko/examples/one-item.md) — 항목 하나 너비의 메뉴 — 카드 하나가 행을 채웁니다. - [한 번에 한 항목 스크롤](https://react-horizontal-scrolling-menu.dev/ko/examples/one-item-scroll.md) — 화살표가 전체 페이지가 아니라 항목 하나를 전진시킵니다. - [메뉴 아래의 화살표](https://react-horizontal-scrolling-menu.dev/ko/examples/bottom-arrows.md) — 화살표는 여러분의 컴포넌트 — 어디에든 놓을 수 있습니다. ## 위치와 스크롤 - [클릭한 항목 가운데 정렬](https://react-horizontal-scrolling-menu.dev/ko/examples/center-on-click.md) — scrollToItem에 inline: center — 스크롤 가능한 탭 패턴. - [id로 항목에 스크롤](https://react-horizontal-scrolling-menu.dev/ko/examples/scroll-to-item.md) — apiRef로 메뉴 외부에서 내부에 접근합니다. - [스크롤 위치 저장과 복원](https://react-horizontal-scrolling-menu.dev/ko/examples/save-restore-position.md) — 언마운트와 페이지 새로고침을 넘어 스크롤 오프셋을 유지. - [커스텀 스크롤 애니메이션](https://react-horizontal-scrolling-menu.dev/ko/examples/custom-transition.md) — 프로그래밍적 스크롤에 나만의 이징과 시간을 가져옵니다. - [스크롤 진행 표시기](https://react-horizontal-scrolling-menu.dev/ko/examples/progress.md) — 어떤 항목이 보이는지에 따라 움직이는 진행 바. ## 입력과 제스처 - [마우스로 드래그해 스크롤](https://react-horizontal-scrolling-menu.dev/ko/examples/mouse-drag.md) — 항목 클릭은 여전히 동작하게 하는 마우스 드래그. - [데스크톱에서 스와이프](https://react-horizontal-scrolling-menu.dev/ko/examples/swipe-desktop.md) — 마우스 사용자를 위한 관성 스와이프. - [모바일에서 화살표 숨기기](https://react-horizontal-scrolling-menu.dev/ko/examples/mobile-swipe-only.md) — 작은 화면에서는 터치만으로 스크롤, 데스크톱에서는 화살표. - [본문 스크롤 방지](https://react-horizontal-scrolling-menu.dev/ko/examples/prevent-body-scroll.md) — 메뉴 위의 휠은 페이지가 아니라 메뉴를 스크롤합니다. ## 동적 항목 - [끝이 보이면 더 불러오기](https://react-horizontal-scrolling-menu.dev/ko/examples/add-items.md) — 마지막 항목 가시성으로 움직이는 무한 추가. - [항목 추가하고 스크롤](https://react-horizontal-scrolling-menu.dev/ko/examples/add-item-and-scroll-to-it.md) — 필터 칩 패턴: 추가한 다음, 보이게 끌어옵니다. - [항목 들고 나기 애니메이션](https://react-horizontal-scrolling-menu.dev/ko/examples/items-animation.md) — @formkit/auto-animate로 추가/제거 애니메이션. - [5000개 항목도 빠름](https://react-horizontal-scrolling-menu.dev/ko/examples/performance.md) — 네이티브 스크롤은 확장됩니다 — 여기 가상화는 필요 없습니다. ## 레이아웃 - [세로 메뉴](https://react-horizontal-scrolling-menu.dev/ko/examples/vertical.md) — 같은 메뉴를, 위에서 아래로 스크롤. - [오른쪽에서 왼쪽](https://react-horizontal-scrolling-menu.dev/ko/examples/rtl.md) — RTL이 방향을 뒤집고, 화살표와 페이징이 따릅니다. ## 레시피 - [무한 루프](https://react-horizontal-scrolling-menu.dev/ko/examples/infinite-loop.md) — 공개 API에서 나오는 매끄러운 루프 — 라이브러리 변경 없음. - [자동 재생](https://react-horizontal-scrolling-menu.dev/ko/examples/autoplay.md) — 접근 가능한 일시정지 동작을 갖춘 자동 전진 루프. --- More examples: · Library summary for LLMs: Package: `npm install react-horizontal-scrolling-menu` · MIT ·