[JS] 특정 요소 스크롤 최하단 고정 시키기

스크롤 고정

 

실시간 채팅 기능을 제작하던 중 특정 요소에 다른 요소가 추가되어도 overflow 스크롤 속성이 적용된 영역이 아래로 내려가지 않고 상단에 고정되어 추가되는 현상을 해결해보았습니다. 

 

코드

javascript
const $element = document.querySelecotr("div");

$element.scrollTop = $element.scrollHeight;

scrollHeight 는 스크롤이 가능한 높이를 뜻합니다.

즉 해당 높이는 스크롤의 최하단을 의미하므로 특정 요소의 scroll을 가능한 길이 만큼 강제로 이동시킵니다.

 

javascript
const $element = document.querySelecotr("div");

// 현재의 최하단 구하기
const eh = $element.clientHeight + $element.scrollTop;

// 요소가 추가되어 길이가 길어지기 전에 비교
const isScroll = $element.scrollHeight <= eh;

// -- 요소 추가하는 코드 --

// 스크롤이 최하단 일때만 고정
if (isScroll) {
  $element.scrollTop = $element.scrollHeight;
}

이때 사용자가 채팅을 읽고 있는 중에는 스크롤이 아래로 이동되지 않도록, 스크롤이 최하단 인지 확인하는 조건문을 추가해주었습니다.

 

스크롤은 요소의 하단을 기준으로 하지 않고, 상단을 기준으로 길이를 측정합니다.

그래서 최하단인지를 알기 위해서는 특정 요소의 길이를 더해줘야합니다.

 

해당 코드 유의사항

요소가 추가된 후 스크롤 위치를 비교하게 되면 이미 특정 요소의 높이가 이전보다 커져서 스크롤이 이동하게 됩니다.

추가가 된 후에 측정을 하기에는 추가한 요소의 길이를 구하고 더하고... 복잡한 수식이 필요로 하게 됩니다.

 

요소가 추가되기전에 비교하는 것이 훨씬 간단한 코드로 구현할 수 있습니다.

 

예제