웹 페이지에서 긴 입력 폼을 다룰 때, 사용자가 입력 요소를 쉽게 찾고 접근할 수 있도록 스크롤 처리가 중요합니다. 이번 글에서는 JavaScript를 사용하여 입력 폼 내의 입력 요소를 스크롤하는 방법에 대해 알아보겠습니다.

1. 스크롤링 기능 구현

const form = document.querySelector('#formId');
const input = document.querySelector('#inputId');

input.focus();

form.scrollTo({
  top: input.offsetTop,
  behavior: 'smooth'
});

위의 코드는 formId라는 아이디를 가진 입력 폼과 inputId라는 아이디를 가진 입력 요소를 가정한 예시입니다. 먼저 input에 포커스를 맞추고, 부드러운 스크롤 효과를 통해 해당 입력 요소로 스크롤합니다.

2. 동적인 스크롤 위치 계산

만약 입력 요소가 동적으로 추가되거나 삭제된다면, 위치를 계산하여 스크롤해야 합니다.

function scrollToInput(inputElement) {
  const form = inputElement.closest('form');
  const scrollOffset = inputElement.offsetTop - form.offsetTop;
  form.scrollTo({
    top: scrollOffset,
    behavior: 'smooth'
  });
}

// 예시: 입력 요소에 포커스가 맞추어질 때
input.addEventListener('focus', (event) => {
  scrollToInput(event.target);
});

위의 코드는 입력 요소에 포커스가 맞추어질 때 scrollToInput 함수를 호출하여 입력 요소의 위치를 계산하고 부드러운 스크롤 효과를 적용합니다.

입력 폼에서 입력 요소의 스크롤 처리를 구현하는 방법에 대해 알아보았습니다. 사용자가 웹 페이지에서 입력 요소를 편리하게 찾고 이용할 수 있도록 스크롤 기능을 추가하여 더 나은 사용자 경험을 제공할 수 있습니다.

rabbit.cony.blog - JavaScript scrollTo Method w3schools - HTML DOM scrollTo() Method