채팅창에서 새로운 글 발생시 스크롤이 바닥을 향하여 새로운 글을 보여주고 사용자가 스크롤을 임의로 움직였을 경우 스크롤이 그 자리에 머물러있고 다시 바닥에 붙였을때 계속해서 바닥에 유지되는 간단하지만 고민해보지 않으면 만들기 버거로운기능을 나름 완벽하게 해결했다고 자부하여 공유해봅니다 아래 소스를 요약설명하자면 1. vue.js 사용됨, 실시간 채팅수신에 의해 리스트의 데이터추가 발생시 알아서 div가 추가되는 구조 2. onscroll 이벤트로 chat_on_scroll() 함수를 사용하여 스크롤 변동을 감시 3. bottom_flag 이라는 플래그를 사용해서 바닥을 유지할지 말지를 결정 만들다보니 vue.js 를 사용한 부분이있어서 아래와같이 설명하긴 했지만 결과적으로는 3번에 해당하는 영역이 새로운 데이터가 추가되서 스크롤을 발생시키는 영역이기만 하면된다 예전같으면 innerHTML 함수를 사용해서 HTML을 추가했을것이므로.. 그걸 생각하면 될듯함 --------------------------------------------------------------------------- 1. HTML 소스 - vue.js 사용됨, 실시간 채팅수신에 의해 리스트의 데이터추가 발생시 알아서 div가 추가되는 구조 <html> <body> <div id="app_chat_list" onscroll="chat_on_scroll()"> <!-- 이곳이 채팅내용에 의해 스크롤이 발생하는 구간 --> <div v-for="item in chat_data_list"> <div> ...