기본 콘텐츠로 건너뛰기

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

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

댓글

이 블로그의 인기 게시물

웹 개발하면서 보안을 유지하기 위한 기본지식

몇개월전에 만들었던 웹기반 (HTML5, CSS3, Flash Player(VideoJS)) VOD플레이어에서 보안이슈가 발생했다. 웹또한 서버를통해 통신을하지만 사용자의 PC에서 실행되는만큼 클라이언트의 개념이 있으며 Javascript 야말로 클라이언트에서 작업하게 되는 영역이라는 점에서 보안상에 이슈 발생.  이유인즉슨  무료로 제공되고 있는것과 유료로 제공되고있는 서비스에 대하여  javascript 단에서 서비스 허용여부를 결정하게될경우  해킹을 통해 이부분을 우회하여 서비스이용이 가능했다는점.. 모든 인증이나, 중요데이터는 java 로 코딩해서 서버단에서 결단이 나도록 했어야했는데 이건 너무 기본적이면서도 아쉬운 실수를 저지르고 말았다..  하하..  많은 분들이 이런 부분을 간과할수도있을듯하여 작성해봅니다.  요즘 보안이슈가 많을탠데 모두들 보안 화이팅 ! 

Android 스마트폰 기본 웹브라우저(Chrome:크롬) 호출하는 스키마(URL Scheme)

신용카드결제 페이지 주소를 카톡으로 던졌을때 카톡 내부에서 결제가 이루어지다보니 결제완료까지 정상적으로 처리되지 않는 경우가 발생한다더라 그래서 생각해본게.. 1) 카카오통 채팅방  2) 링크 전송  3) 링크를 클릭하면 스마트폰애 내장된 웹브라우저를 실행하는 URL스키마 실행  4) 실행된 웹브라우저에서 결제페이지로 이동 이 절차를 거치면 카톡 외부로 나와서 독립적인 웹브라우저상에서 결제를 진행하기때문에 정상처리가 가능할것이라고 판단 찾다 찾다가.. 알아낸것이 안드로이드 (가능) - 롤리팝부터 크롬 브라우저가 기본앱이다 - 크롬을 호출방법 intent://www.naver.com#Intent;scheme=http;package=com.android.chrome;end  아이폰 (조건부 가능) - 사파리를 호출하는 앱스키마가 없으며, 사파리를 통해서 검색어를 입력한 검색기능만 가능 - 크롬브라우저 앱이 설치되어있을경우 아래와같이 호출 가능 googlechrome:////www.naver.com <사용법> < html > < body > < script >      var currentOS = "else" ;      var mobile = ( /iphone | ipad | ipod | android/ i .test(navigator.userAgent.toLowerCase()));      if (mobile) {          var userAgent = navigator.userAgent.toLowerCase();          if (userAgent.search( "android" ) > - 1 )             currentOS = "android" ;          else if

flutter showDatePicker locale 설정을 통해 한국어로 표현되게 하는방법

제목 그대로.. showDatePicker 를 사용하면 아래와같은 형태로 사용할수가 있는데 Future<Null> _selectDate(BuildContext context) async { final DateTime picked = await showDatePicker( context: context , initialDate: selectedDate , firstDate: DateTime ( 2015 , 8 ) , lastDate: DateTime ( 2101 ) , initialDatePickerMode: DatePickerMode. year , //locale : const Locale('kr') ) ; if (picked != null && picked != selectedDate) setState(() { selectedDate = picked ; debugPrint( "_selectDate" ) ; debugPrint(selectedDate.toString()) ; }) ; } 위 소스처럼 locale을 직접 할당하면 datePicker 로딩부터 실패한다 그래서 해결방법을 찾아본 결과 아래와같이 MyApp에서 locale설정을 해주면 이곳에 설정한 locale옵션을 따라서 datepicker의 언어설정이 바뀌게된다 class MyApp extends StatelessWidget { @override Widget build (BuildContext context) { return MaterialApp ( title: 'Flutter Demo