앱에서 input 클릭시 뷰포트 안으로 들어오게 하는 방법

this.document.activeElement.scrollIntoView()는 웹 페이지에서 현재 포커스된(활성화된) 요소를 뷰포트(viewport) 내에 보이도록 스크롤하는 메서드 호출을 의미합니다. 이것은 웹 페이지의 사용자 인터페이스에서 특정 요소에 포커스가 주어졌을 때, 해당 요소가 사용자에게 보이도록 자동으로 스크롤하는 데 사용됩니다.

용도

사용자가 웹 페이지에서 키보드를 사용하거나 특정 상호작용을 통해 요소를 활성화할 때, 해당 요소가 뷰포트 밖에 있을 수 있습니다. 이때 scrollIntoView()를 사용하면 활성화된 요소가 자동으로 뷰포트 안으로 스크롤되어 사용자에게 보여지도록 할 수 있습니다. 이는 특히 접근성 측면에서 유용하며, 사용자 경험을 개선하는 데 도움이 됩니다.

작동 방식

• this.document.activeElement는 현재 활성화된 요소를 참조합니다. 활성화된 요소는 일반적으로 키보드 포커스를 받은 요소를 의미하며, 폼 입력 필드, 버튼, 링크 등이 될 수 있습니다.
• scrollIntoView()는 이 활성화된 요소를 브라우저 뷰포트에 맞게 스크롤합니다. 옵션 없이 호출하면 해당 요소가 뷰포트의 상단에 정렬됩니다.

추가 옵션

scrollIntoView()에는 옵션을 전달하여 스크롤 동작을 제어할 수 있습니다. 두 가지 주요 옵션은 다음과 같습니다.

• behavior: 스크롤이 어떻게 이루어지는지 결정합니다. auto는 기본값이며, 스크롤이 즉시 실행됩니다. smooth는 부드럽게 스크롤하는 애니메이션 효과를 제공합니다.
• block: 스크롤 후 요소의 정렬 위치를 지정합니다. start, center, end, nearest 중 하나를 선택할 수 있습니다. 기본값은 start입니다.

// 현재 활성화된 요소가 있으면 그것을 뷰포트 안으로 스크롤합니다.
if (document.activeElement) {
  document.activeElement.scrollIntoView({
    behavior: 'smooth',  // 부드럽게 스크롤
    block: 'center',     // 요소를 뷰포트 중앙에 정렬
  });
}

이 예제는 현재 활성화된 요소가 있을 경우, 해당 요소를 부드럽게 스크롤하여 뷰포트 중앙에 맞추는 코드입니다. 이는 예를 들어, 사용자가 입력 필드를 탭으로 이동할 때 해당 필드가 뷰포트 중앙에 위치하도록 할 때 유용합니다.

 

Block 옵션의 값

block 옵션은 다음과 같은 값 중 하나를 가질 수 있습니다:

• start: 요소를 뷰포트의 상단에 맞춥니다. 요소가 스크롤 후 뷰포트의 최상단에 위치하게 됩니다. 예를 들어, 폼 입력 필드에 포커스를 줄 때, 이 옵션을 사용하면 필드가 화면의 가장 위에 표시됩니다.
• center: 요소를 뷰포트의 중앙에 정렬합니다. 스크롤 후, 요소가 뷰포트 중앙에 오도록 스크롤됩니다. 이 옵션은 스크롤을 통해 사용자가 볼 수 있는 영역의 가운데에 요소를 위치시키는 데 유용합니다.
• end: 요소를 뷰포트의 하단에 맞춥니다. 스크롤 후 요소가 화면의 하단에 위치합니다. 일반적으로, 요소가 브라우저 뷰포트 하단에 맞춰지므로 다른 요소에 의해 가려질 수 있습니다.
• nearest: 요소가 현재 뷰포트에서 가장 가까운 위치에 정렬됩니다. 예를 들어, 요소가 이미 뷰포트의 일부에 위치하고 있을 때, nearest는 최소한의 스크롤로 해당 요소를 뷰포트에 최대한 노출되도록 합니다. 요소가 이미 뷰포트 내에 있다면 스크롤이 발생하지 않을 수도 있습니다.

사용 예시

다음은 scrollIntoView()의 block 옵션을 활용하여 요소를 스크롤하는 예시입니다:

// 특정 요소를 식별합니다.
const myElement = document.getElementById("my-element");

// 요소를 뷰포트의 상단에 정렬합니다.
myElement.scrollIntoView({ block: 'start', behavior: 'smooth' });

// 요소를 뷰포트의 중앙에 정렬합니다.
myElement.scrollIntoView({ block: 'center', behavior: 'smooth' });

// 요소를 뷰포트의 하단에 정렬합니다.
myElement.scrollIntoView({ block: 'end', behavior: 'smooth' });

// 요소를 뷰포트 내에서 가장 가까운 위치에 정렬합니다.
myElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });

이 예시에서는 behavior 옵션을 추가적으로 사용하여 스크롤 애니메이션이 부드럽게 일어나도록 설정했습니다. behavior를 smooth로 설정하면 스크롤이 부드럽게 이동하고, auto로 설정하면 즉시 스크롤됩니다.

요약

• start: 요소를 뷰포트의 상단에 맞춥니다.
• center: 요소를 뷰포트 중앙에 맞춥니다.
• end: 요소를 뷰포트의 하단에 맞춥니다.
• nearest: 요소를 뷰포트 내에서 가장 가까운 위치에 정렬합니다.