Examples

fixed 요소에 focus

• isFixed 옵션은 Step Guide에서 대상 요소가 화면 밖에 있을 때의 동작을 제어합니다.
• fixed요소를 step으로 사용할 경우 isFixed: true를 추가해 주세요.

stepGuide({
  el: document.body,
  options: {
    buttonLabel: {
      prev: '이전',
      next: '다음',
      done: '완료',
      skip: '건너뛰기',
    },
    steps: [
      {
        title: '가이드 시작',
        description: 'isFixed 옵션의 차이점을 확인해보세요.',
        element: '#start-button',
        position: 'bottom',
      },
      {
        title: '스크롤 가능한 요소 (isFixed: false)',
        description: '이 요소는 자동으로 스크롤되어 화면에 표시됩니다.',
        element: '#scrollable-element',
        position: 'bottom',
      },
      {
        title: '고정된 요소 (isFixed: true)',
        description: '이 요소는 스크롤되지 않고 현재 위치에서 가이드가 표시됩니다.',
        element: '#fixed-element',
        position: 'left',
        isFixed: true,
      },
      {
        title: '가이드 완료',
        description: 'isFixed 옵션의 차이점을 확인했습니다!',
        element: null,
        position: 'bottom',
      },
    ],
    useAnimation: true,
    clickableDim: false,
    hideSkip: false,
    hideStepCount: false,
  },
});

isFixed 옵션 사용

`isFixed` 옵션을 사용하여 요소의 자동 스크롤 여부를 제어할 수 있습니다.

시작 버튼

이 버튼을 클릭하여 가이드를 시작하세요.

긴 콘텐츠 영역

이 영역은 스크롤이 필요한 긴 콘텐츠입니다.

스크롤 가능한 요소

isFixed: false (기본값) - 자동 스크롤이 발생합니다.

추가 콘텐츠

더 많은 콘텐츠로 스크롤을 유도합니다.

이 예제들을 통해 StepGuide의 다양한 옵션을 활용할 수 있습니다.