프로젝트 를 진행하던중 댓글 영역을 따로 div로 지정해둔뒤 height 값을 지정하자, overflow 시에 스크롤이 자동으로 내려가지않아, 이용자가 직접 스크롤을 내리지않으면 밑에있는 요소들이 보이지 않는 현상이발견되었다.

이를 해결하기위해서는 DOM을 활용해 스크롤바를 아래로 고정시키면된다.

페이지 전체의 스크롤을 이동시키고 싶다면 아래 함수를 사용하면된다.

var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

하지만 특정 element의 스크롤바를 아래로 이동시키고 싶다면, 추가적인 작업이 요구된다.

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

(elemnet.clientHeight 속성은 요소 내부 높이를 픽셀로 반환한다.)

내 페이지는 댓글창이 여러개였는데 이를 따로따로 작동시키기위해서 댓글을 입력하는 onClick eventhandler 에 위 함수 호출해주는 방식으로 넣어놨다.

gotoBottom = idx => {
    var element = document.getElementsByClassName("sw-commentS-body")[idx];
    element.scrollTop = element.scrollHeight - element.clientHeight;
  }; 

submitComment = e => {
    this.gotoBottom(this.props.index)
}