Element.scrollLeft 메서드가 작동하지 않아요 :(

개발 도중에 일어난 사례를 가지고 작성한 가벼운 에러 리포트 입니다.

 

A 라이브러리는 받은 정보를 바탕으로 Tempalte<HTMLDocument>을 랜더링 하여 Return 한다.

 

이 랜더링된 템플릿에는 Horizontal slider가 있고, 사용자는 UI와 상호작용 하며 해당 Horizontal slider를 좌, 우로 움직일 수 있다.

하지만 사용자가 UI와 상호작용할 때 라이브러리에서 Template를 재 랜더링 하여 반영해야 하는 상황이 발생했다.

Template를 재 랜더링 하여 반영하면, 사용자가 Horizontal slider에서 스크롤한 만큼의 값은 초기화되고, 0으로 돌아온다.

 

그러하여 사용자는 알 수 없는 시점에 Horizontal slider가 계속 왼쪽 끝으로 이동하는 현상을 경험할 수 있는 것이다.

 

이 현상을 어떻게 해결해야 할까.

 

Element 객체의 scrollLeft라는 method를 발견하게 되었고, 나는 랜더링된 Template에서 해당 Horizontal slider reference를 찾아 scrollLeft method를 실행해 준 뒤 Template를 반영하였다.

하지만 Horizontal slider는 내가 지정한 수 만큼 scrollLeft되지 않았다.

 

여러가지 방법을 생각해보던 중 Template를 반영하고 나서 scrollLeft method를 실행해보았다.

위와 같이 DOM에 재 랜더링된 템플릿을 반영 후 해당 method를 실행할 때에는 작동했다.

아마 DOM에 반영되어있지 않은 가상 Element에는 scrollLeft method가 작동되지 않는다고 생각한다.

 

DOM에 반영 후 scrollLeft method를 실행 했는데도 되지 않는다면 입력된 인자를 확인하시거나, 비동기 문제 혹은 해당 Slider의 reference check를 해보세요