기본 콘텐츠로 건너뛰기

스크롤 아래로 향하기 (바닥으로 보내기) javascript, vue.js

채팅창에서 새로운 글 발생시

스크롤이 바닥을 향하여 새로운 글을 보여주고
사용자가 스크롤을 임의로 움직였을 경우 스크롤이 그 자리에 머물러있고
다시 바닥에 붙였을때 계속해서 바닥에 유지되는

간단하지만 고민해보지 않으면 만들기 버거로운기능을
나름 완벽하게 해결했다고 자부하여 공유해봅니다

아래 소스를 요약설명하자면
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를 만들어서 바닥에 한번에라도 붙으면 그때부턴 바닥유지고
바닥과 반대로 움직이는 스크롤이 발생하면 바닥유지를 해제하도록 해버렸더니
깔끔하게 움직였다
코드도 깔끔하고, 코드라인도 많이 줄었고..
만족!!

혹시 다른 방법으로 스크롤 바닥유지와 해제를 구현하신분이있다면
댓글 남겨주세요~!

댓글

이 블로그의 인기 게시물

리눅스 부팅시 스크립트 실행하기

서버를 끄고 켤때  실행되어야할 명령 혹은 프로세스들이 있을것이다. 이것들을 서버를 켜고 매번 직접 실행시켜준다면 누락의 위험도 잇고.. 번거롭기도 하고  그리하여  윈도우즈에서 시작프로그램에 등록하면 컴퓨터가 다 켜졌을때 알아서 실행해주듯이 리눅스에도 이와같은 기능이 있다.  ============================================================= 기본배경지식 리눅스는 부팅이되면서  런레벨에 맞는 작업을 수행하며  각 런레벨의 작업은 아래와 같이 분리된다.  /etc/rc.d/rc0.d           runlevel 0 /etc/rc.d/rc1.d             runlevel 1 /etc/rc.d/rc2.d             runlevel 2 /etc/rc.d/rc3.d             runlevel 3 /etc/rc.d/rc4.d             runlevel 4 /etc/rc.d/rc5.d             runlevel 5 /etc/rc.d/rc6.d             runlevel 6 /etc/rc.d/rc.local         모든 부팅작업이 완료된 다음 마지막에 수행  ============================================================= 부팅시 스크립트 실행하기  방법 1. 난이도 (하),  rc.local 에 등록하기. rc.local 을 편집기로 열어서  vi  /etc/rc.d/rc.local    실행하고자 하는 스크립트를 작성  톰캣을 실행한다고 했을때 예제 : su - root -c /tomcat/bin/startup.sh  위에서 root 부분은 사용자계정으로 실행하고싶을 시 사용자계정을 적용해주면 되고.. 뒤에 톰캣 startup.sh 경로는 본인에 상황에 맞는 경로로 ~  방법 2. 난이도 (중) 서비스로 등록하기  방법2는 .. 조금 내용도 길고 이해가 필요하므로 잘 정리되어있는 이곳을 참조하자.  http

Redhat 7, CentOS 7 이상버전의 locale 설정 (언어설정)

레드햇과, 센트오에스 6점대 버전까지는 /etc/sysconfig/i18n 이곳에 인코딩설정을 해서 처리했었지만 7부터는 i18n을 사용하지 않는다. 필요할법한 명령어들을 정리해봤으니 참고해서 사용하면 되겠다. 1. 현재 언어셋팅상태 확인 env |grep -e LANG -e LC 또는 locale 2. 시스템에서 지원 가능한 캐릭터셋 확인 localectl list-locales 3. 콘솔명령어를 통해 locale설정 변경 localectl set-locale LANG={적용할 캐릭터셋} ex) localectl set-locale LANG=ko_KR.euckr 4. 캐릭터셋 수동설정 vi /etc/locale.conf 로 파일을 연다음 아래 내용을 작성 LANG={적용할 캐릭터셋} ex) LANG=ko_KR.euckr 설정 완료후 재부팅시 locale명령을 통해 원하는 캐릭터셋이 유지되는지 확인

vscode (visual studio code) 한글 인코딩 설정

1. 파일 -> 기본설정 -> 설정 에서 나오는 설정화면 우측에 아래 두개 내용을 추가 "files.encoding" : "EUC-KR" , "files.autoGuessEncoding" : true 위에는 항상 EUC-KR 로 인코딩하겠다는 기본설정을 바꾸는 내용이며 아래는 현재 파일에 알맞은 인코딩을 알아서 찾겠다는 내용이라고 한다 끝 !