useScrollToggle

@hua-labs/hua/motion

스크롤 위치 기반 상태 토글 — 헤더 숨김/표시, FAB 버튼용

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const toggle = useScrollToggle({
  hideOpacity: 0,
  hideTranslateY: 20,
  scrollThreshold: 0.1,
});

return (
  <div ref={toggle.ref} style={toggle.style}>
    Appears when scrolled into view
  </div>
);

라이브 데모

현재 스크롤 위치

0px

토글 상태

비활성

헤더 데모

Header상단 - 투명

스크롤하여 200px 임계값을 테스트하세요

FAB 버튼 데모

FAB 숨겨짐 (상단에서)

API 레퍼런스

옵션

이름	타입	기본값	설명
showOpacity	number	1	docs:hooks.use-scroll-toggle.options.showOpacity
hideOpacity	number	0	docs:hooks.use-scroll-toggle.options.hideOpacity
showScale	number	1	docs:hooks.use-scroll-toggle.options.showScale
hideScale	number	0.8	docs:hooks.use-scroll-toggle.options.hideScale
showTranslateY	number	0	docs:hooks.use-scroll-toggle.options.showTranslateY
showRotate	number	0	docs:hooks.use-scroll-toggle.options.showRotate
showTranslateX	number	0	docs:hooks.use-scroll-toggle.options.showTranslateX
hideTranslateY	number	20	docs:hooks.use-scroll-toggle.options.hideTranslateY
hideRotate	number	0	docs:hooks.use-scroll-toggle.options.hideRotate
hideTranslateX	number	0	docs:hooks.use-scroll-toggle.options.hideTranslateX
scrollThreshold	number	0.1	docs:hooks.use-scroll-toggle.options.scrollThreshold
scrollDirection	"up" \| "down" \| "both"	"both"	docs:hooks.use-scroll-toggle.options.scrollDirection
duration	number	300	docs:hooks.use-scroll-toggle.options.duration
easing	string	"ease-out"	docs:hooks.use-scroll-toggle.options.easing
onComplete	() => void	-	docs:hooks.use-scroll-toggle.options.onComplete
onStart	() => void	-	docs:hooks.use-scroll-toggle.options.onStart
onStop	() => void	-	docs:hooks.use-scroll-toggle.options.onStop
onReset	() => void	-	docs:hooks.use-scroll-toggle.options.onReset

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-scroll-toggle.returns.ref
style	CSSProperties	docs:hooks.use-scroll-toggle.returns.style
isVisible	boolean	docs:hooks.use-scroll-toggle.returns.isVisible
isAnimating	boolean	docs:hooks.use-scroll-toggle.returns.isAnimating
progress	number	docs:hooks.use-scroll-toggle.returns.progress
start	() => void	docs:hooks.use-scroll-toggle.returns.start
stop	() => void	docs:hooks.use-scroll-toggle.returns.stop
reset	() => void	docs:hooks.use-scroll-toggle.returns.reset
pause	() => void	docs:hooks.use-scroll-toggle.returns.pause
resume	() => void	docs:hooks.use-scroll-toggle.returns.resume

사용 사례

맨 위로

스크롤 시 맨 위로 버튼 표시

스티키 헤더

스크롤 시 헤더 스타일 변경

스크롤 기반 UI

스크롤 위치에 따른 UI 변화

지연 로딩

뷰포트 진입 시 콘텐츠 로드

useScrollReveal useScrollDirectionPro