채팅창에서 새로운 글 발생시
스크롤이 바닥을 향하여 새로운 글을 보여주고
사용자가 스크롤을 임의로 움직였을 경우 스크롤이 그 자리에 머물러있고
다시 바닥에 붙였을때 계속해서 바닥에 유지되는
간단하지만 고민해보지 않으면 만들기 버거로운기능을
나름 완벽하게 해결했다고 자부하여 공유해봅니다
아래 소스를 요약설명하자면
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>
<chat_balloon v-bind:data="item.chat_data"></chat_balloon>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------
2. javascript
- onscroll 이벤트로 chat_on_scroll() 함수를 사용하여 스크롤 변동을 감시
var pre_diffHeight = 0;
var bottom_flag = true;
var chat_on_scroll = function(){
var objDiv = document.getElementById("app_chat_list");
if((objDiv.scrollTop + objDiv.clientHeight) == objDiv.scrollHeight){
// 채팅창 전체높이 + 스크롤높이가 스크롤 전체높이와 같다면
// 이는 스크롤이 바닥을 향해있다는것이므로
// 스크롤 바닥을 유지하도록 플래그 설정
bottom_flag = true;
}
if(pre_diffHeight > objDiv.scrollTop + objDiv.clientHeight ){
// 스크롤이 한번이라도 바닥이 아닌 위로 상승하는 액션이 발생할 경우
// 스크롤 바닥유지 플래그 해제
bottom_flag = false;
}
//
pre_diffHeight = objDiv.scrollTop + objDiv.clientHeight
};
---------------------------------------------------------------------------
3. javascript (vue.js)
- bottom_flag 이라는 플래그를 사용해서 바닥을 유지할지 말지를 결정
var app_chat_list = new Vue({
el: '#app_chat_list',
data : function() {
return returnData;
},
updated : function() {
// app_chat_list 의 변화가 발생할때마다 수행되는 영역
var objDiv = document.getElementById("app_chat_list");
if(bottom_flag){
// 채팅창 스크롤 바닥 유지
objDiv.scrollTop = objDiv.scrollHeight;
}
}
});
---------------------------------------------------------------------------
시행착오로는..
증가하는 말풍선의 높이와.. 스크롤높이.. 채팅화면높이등의 오차를 반영해서
어찌어찌 해보려했으니
짧은간격 (0.1 ~ 0.3 초 수준 또는 그 이하)으로 다수의 메시지가 발생할때
바닥을 유지하지 못하는 현상도 있었고
코드도 지저분했고..
바닥유지 버튼, 바닥유지 해제버튼
이렇게 옵션을 제공하는곳이 있었던걸 떠올렸다가
flag를 만들어서 바닥에 한번에라도 붙으면 그때부턴 바닥유지고
바닥과 반대로 움직이는 스크롤이 발생하면 바닥유지를 해제하도록 해버렸더니
깔끔하게 움직였다
코드도 깔끔하고, 코드라인도 많이 줄었고..
만족!!
혹시 다른 방법으로 스크롤 바닥유지와 해제를 구현하신분이있다면
댓글 남겨주세요~!
스크롤이 바닥을 향하여 새로운 글을 보여주고
사용자가 스크롤을 임의로 움직였을 경우 스크롤이 그 자리에 머물러있고
다시 바닥에 붙였을때 계속해서 바닥에 유지되는
간단하지만 고민해보지 않으면 만들기 버거로운기능을
나름 완벽하게 해결했다고 자부하여 공유해봅니다
아래 소스를 요약설명하자면
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>
<chat_balloon v-bind:data="item.chat_data"></chat_balloon>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------
2. javascript
- onscroll 이벤트로 chat_on_scroll() 함수를 사용하여 스크롤 변동을 감시
var pre_diffHeight = 0;
var bottom_flag = true;
var chat_on_scroll = function(){
var objDiv = document.getElementById("app_chat_list");
if((objDiv.scrollTop + objDiv.clientHeight) == objDiv.scrollHeight){
// 채팅창 전체높이 + 스크롤높이가 스크롤 전체높이와 같다면
// 이는 스크롤이 바닥을 향해있다는것이므로
// 스크롤 바닥을 유지하도록 플래그 설정
bottom_flag = true;
}
if(pre_diffHeight > objDiv.scrollTop + objDiv.clientHeight ){
// 스크롤이 한번이라도 바닥이 아닌 위로 상승하는 액션이 발생할 경우
// 스크롤 바닥유지 플래그 해제
bottom_flag = false;
}
//
pre_diffHeight = objDiv.scrollTop + objDiv.clientHeight
};
---------------------------------------------------------------------------
3. javascript (vue.js)
- bottom_flag 이라는 플래그를 사용해서 바닥을 유지할지 말지를 결정
var app_chat_list = new Vue({
el: '#app_chat_list',
data : function() {
return returnData;
},
updated : function() {
// app_chat_list 의 변화가 발생할때마다 수행되는 영역
var objDiv = document.getElementById("app_chat_list");
if(bottom_flag){
// 채팅창 스크롤 바닥 유지
objDiv.scrollTop = objDiv.scrollHeight;
}
}
});
---------------------------------------------------------------------------
시행착오로는..
증가하는 말풍선의 높이와.. 스크롤높이.. 채팅화면높이등의 오차를 반영해서
어찌어찌 해보려했으니
짧은간격 (0.1 ~ 0.3 초 수준 또는 그 이하)으로 다수의 메시지가 발생할때
바닥을 유지하지 못하는 현상도 있었고
코드도 지저분했고..
바닥유지 버튼, 바닥유지 해제버튼
이렇게 옵션을 제공하는곳이 있었던걸 떠올렸다가
flag를 만들어서 바닥에 한번에라도 붙으면 그때부턴 바닥유지고
바닥과 반대로 움직이는 스크롤이 발생하면 바닥유지를 해제하도록 해버렸더니
깔끔하게 움직였다
코드도 깔끔하고, 코드라인도 많이 줄었고..
만족!!
혹시 다른 방법으로 스크롤 바닥유지와 해제를 구현하신분이있다면
댓글 남겨주세요~!
댓글
댓글 쓰기