[JS] 중첩된 DIV, 다중 스크롤 영역에서의 스크롤 이동처리

div를 onclick 하면 화면이 크기가 확장되면서 상위 엘리먼트의 길이도 늘어나는 상황이었다.

DIV 안의 DIV, 즉 body 태그 말고 내부 엘리먼트의 내부 엘리먼트를 누를 때 스크롤을 해야하는 상황에서 잘 되지 않았다.

하지만 검색해봐도 아래 코드만 나올 뿐 다른이야기는 없었다.

     const monitorBody = document.getElementById('scroll-area');
     monitorBody.scrollTop = monitorBody.scrollHeight;

오래 시도하고 생각해본 결과

transition 의 영향으로 div element의 height가 늘어나는 시간과 자바스크립트 onclick event 작동 순서간의 동기가 맞지 않아 스크롤링이 제대로 처리되지 않을것 같았다.

   transition: all linear 0.2s 0s;

다행히도 내 생각이 맞았고,

setTimeout 메서드를 통해 동기를 맞추고 나니 잘 작동했다.

     const monitorBody = document.getElementById('scroll-area');
        setTimeout(() => {
            monitorBody.scrollTop = monitorBody.scrollHeight + 100;
        }, [200]);