useSmoothScroll

@hua-labs/hua/motion

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useSmoothScroll } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const { scroll, progress, scrollTo } = useSmoothScroll({ lerp: 0.08 });

return (
  <button onClick={() => scrollTo(document.getElementById("section")!)}>
    Scroll to section
  </button>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
enabled	boolean	true	docs:hooks.use-smooth-scroll.options.enabled
lerp	number	0.1	docs:hooks.use-smooth-scroll.options.lerp
wheelMultiplier	number	1	docs:hooks.use-smooth-scroll.options.wheelMultiplier
touchMultiplier	number	2	docs:hooks.use-smooth-scroll.options.touchMultiplier
direction	"vertical" \| "horizontal"	"vertical"	docs:hooks.use-smooth-scroll.options.direction
onScroll	(scroll: number) => void	-	docs:hooks.use-smooth-scroll.options.onScroll

반환값

이름	타입	설명
scroll	number	docs:hooks.use-smooth-scroll.returns.scroll
targetScroll	number	docs:hooks.use-smooth-scroll.returns.targetScroll
progress	number	docs:hooks.use-smooth-scroll.returns.progress
scrollTo	(target: number \| HTMLElement, options?: { offset?: number }) => void	docs:hooks.use-smooth-scroll.returns.scrollTo
stop	() => void	docs:hooks.use-smooth-scroll.returns.stop

사용 사례

패럴랙스 효과

스크롤 기반 패럴랙스 레이어

useScrollDirectionPro useGesture