채팅창 목업구현을 마치고 더미데이터로 Test를 하는데 채팅이 입력되어도
스크롤바가 위에 있을시에 아래로 내려오지 않아서 메세지가 입력될 경우 스크롤바가
아래로 내려오도록 설정하였다
getElementsByClassName
주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 HTMLCollection 을 반환합니다.
HTMLCollection
HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다.
HTML DOM 내의 HTMLCollection은 문서가 바뀔 때 실시간으로 업데이트됩니다. _ MDN
스크롤 위치 계산
scrollHeight - scrollTop === clientHeight
(전체 콘텐츠 길이 - 보이지 않는 콘텐츠 길이 = 보이고 있는 컨텐츠 길이)
clientHeight
clientWidth와 clientHeight 프로퍼티는 테두리 안 영역의 사이즈 정보를 제공합니다.
테두리 안에는 콘텐츠 너비와 패딩이 포함되는데, 스크롤바 너비는 포함되지 않습니다.
scrollHeight
세로 스크롤바에 감춰진 부분을 포함하는 콘텐츠 영역 안쪽 전체의 높이
scrollTop
‘세로 스크롤바에 의해 가려져 보이지 않는’ 위쪽 콘텐츠의 높이
const trackScrolling = () => {
const chatRoom = document.getElementsByClassName('chat-messages')
// 클래스네임으로 찾아서 요소 가져와서 저장하기
if (chatRoom.scrollHeight - chatRoom.scrollTop === chatRoom.clientHeight) {
document.removeEventListener('scroll', trackScrolling);
}
};
// 전체길이 - 안보이는 콘텐츠길이 === 보이는길이 , 밑으로 내려왔으면 이벤트제거
// removeEventListener(type(제거할 이벤트리스너 이벤트타입),listener(이벤트 타깃에서 제거할 이벤트 핸들러 함수))
//스크롤이 발생될때마다 두번째 인자 핸들러 함수 제거
useEffect(() => {
//컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 이벤트리스너 추가
const chatRoom = document.getElementsByClassName('chat-messages')[0]
document.getElementsByClassName('chat-messages')[0].addEventListener('scroll', trackScrolling);
chatRoom.scrollTop = chatRoom.scrollHeight
// 안보이는 콘텐츠크기 = 전체콘텐츠크기로 지정
// 스크롤 아래로 내리기
})
참고사이트
- https://ko.javascript.info/size-and-scroll
- https://developer.mozilla.org/ko/docs/Web/API/EventTarget/removeEventListener
자주 사용하지 않아 잊고 있었던 DOM 명령어들을 다시 사용하게 되면서 클래스를 가져오는법과 ID로 선택할 수 있는법을 다시 한번 더 짚고 갈 수 있었다
글 내용을 찾아보던 중 querySelector는 사용을 자제하고있다는 최근 글도 발견하게 되면서 새로운 사실도 알 수 있게 되었다.
