22-03-13-SUN

[snaag]

• REF: https://blckchainetc.tistory.com/225
• SUBJECT: Scroll (새로운 element 추가할 떄마다 맨 하단으로 내리기)

[snaag]

scrollTop, scrollHeight, clientHeight

• scrollHeight: 전체 컨텐츠 의 높이.
• scrollTop: 현재 보고있는 영역이, 전체 컨텐츠에서 얼마나 아래에 있는지.
• clientHeight: 현재 보고있는 영역의 content height (CSS box model).

[snaag]

scrollTop = scrollHeight - clientHeight

• 스크롤을 바닥으로 내리면, scrollTop + clientHeight = scrollHeight.
• 따라서, 자동으로 스크롤을 내리게 하려면 scrollTop = scrollHeight - clientHeight

const ul = document.querySelector('#log');
// ...
const li = document.createElement('li');
li.innerText = text;
ul.appendChild(li);

const { scrollHeight, clientHeight } = ul; // ⭐️
ul.scrollTop = scrollHeight - clientHeight; // ⭐️