스크롤 가능한 컨테이너의 자동 스크롤 동작을 관리하는 커스텀 훅입니다.

하단 자동 스크롤 기능과 수동 스크롤 잠금 기능을 제공합니다.

const { containerRef, isScrollLocked } = useScrollToBottom([messages]);

return (
<div ref={containerRef} className="overflow-auto">
{messages.map(message => (
<ChatMessage key={message.id} {...message} />
))}
</div>
);
  • Parameters

    • dependencies: unknown[] = []

      스크롤 업데이트를 트리거할 의존성 배열

    Returns UseScrollToBottom

    • containerRef - 스크롤 컨테이너에 연결할 ref
    • isScrollLocked - 스크롤 자동 잠금 상태
    • setScrollLocked - 스크롤 잠금 상태를 설정하는 함수