Affix 고정

스크롤 시 상단/하단에 고정합니다. IntersectionObserver로 자리표시자의 경계 이탈을 감지합니다(스크롤 쓰로틀링 오버헤드가 없으며, IO를 지원하지 않는 환경에서는 자동으로 스크롤 리스너로 폴백합니다).

기본 사용법

상단 고정

상단 고정 도구 모음

offset-bottom으로 하단 고정을 트리거합니다(offset-top보다 우선). target은 스크롤을 감시할 컨테이너를 지정합니다(기본값 뷰포트).

하단 고정

하단 고정 도구 모음(offset-bottom)

<script setup lang="ts">
</script>

<template>
  <!-- 하단 고정 -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">하단 고정 도구 모음</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- 하단 고정 -->
  <LhAffix :offset-bottom="8">
    <div class="demo-affix-bar">하단 고정 도구 모음</div>
  </LhAffix>
</template>

<script setup lang="ts">
</script>

<template>
  <!-- 상단 고정 -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">상단 고정 도구 모음</div>
  </LhAffix>
</template>

<script>
export default {}
</script>

<template>
  <!-- 상단 고정 -->
  <LhAffix :offset-top="8">
    <div class="demo-affix-bar">상단 고정 도구 모음</div>
  </LhAffix>
</template>

API

LhAffix Props

속성	설명	타입	기본값
offsetTop	뷰포트 상단으로부터 지정한 픽셀에 도달하면 상단 고정	number	0
offsetBottom	뷰포트 하단으로부터 지정한 픽셀에 도달하면 하단 고정(offsetTop보다 우선)	number	0
target	스크롤 감시 컨테이너(선택자 또는 요소, 기본값 뷰포트)	string | HTMLElement	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	콜백 매개변수
change	고정 상태가 전환될 때 발생(상단/하단 고정 진입 또는 이탈)	(fixed: boolean)

접근성

• 별도의 role은 없으며, 고정 상태가 문서 흐름의 포커스 순서에 영향을 주지 않습니다
• 고정 상태는 자리표시자 요소로 높이를 유지하여 레이아웃 점프를 방지합니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/affix/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhAffixProps

export interface LhAffixProps {
  /** 뷰포트 상단으로부터 지정한 픽셀에 도달하면 상단 고정 */
  offsetTop?: number
  /** 뷰포트 하단으로부터 지정한 픽셀에 도달하면 하단 고정(offsetTop보다 우선) */
  offsetBottom?: number
  /** 스크롤 감시 컨테이너(선택자 또는 요소, 기본값 뷰포트) */
  target?: string | HTMLElement
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}