요소의 동적인 위치값에 따라 자동으로 스크롤이 안되는 문제_element.scrollintoView()

문제

shoplist

다음과 같이 리스트 항목을 JS 상에서 동적으로 추가되게끔 구현하였다.

 

하지만 리스트 항목이 현재 상위 요소의 view를 overflow하게 되면 새롭게 추가된 항목으로 스크롤 뷰가 자동으로 맞춰지지 않는 UX적으로 불편함이 발생하였다.

 

이를 해결하기 위해 처음에는 scrollElement의 scrollTop의 상대적 위치 값을 이용하였지만 이보다 더 간편하게 특정 요소 위치로 스크롤 뷰를 이동할 수 있는 방법이 있어 포스팅하고자 한다.

 

문제해결_element.scrollintoView()

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

element.scrollIntoView - Web API | MDN

Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.

 

li를 동적으로 새롭게 추가할 때마다, 요소에 scrollintoView 메서드를 사용함으로써, 현재 스크롤 뷰가 항상 새롭게 추가되는 요소에 포커싱되도록 코드를 수정해주었다.

function onAdd() {
    const text = input.value;

        if(text !== '') {
            const item = createItem(text);
            items.append(item);
            item.scrollIntoView({block: 'center'}); //옵션 값 => 수직 정렬을 center에 정의
            } else {
                console.error('Type Text!');
            }
   
    input.value = '';
    input.focus();
}

 

결과

shoplist

결과적으로 overflow가 발생하면 자동으로 스크롤 뷰가 이동하는 리스트를 구현할 수 있었다.