스크롤 이벤트

목표
1. 채팅페이지 진입 시 / 상대방에게 메세지 도착 시, 최하단으로 스크롤 이동시킨다.
2. 내가 메세지 보낸 후 스크롤을 창의 최하단으로 이동시킨다

필요한 개념

Javascript 스크롤 이벤트 관련 속성, 메소드
- scrollHeight : 스크롤 전체 영역
- clientHeight : 사용자에게 실제로 보여지는 영역
- scrollTop() : 기준점으로부터 y축으로 스크롤된 양을 반환한다.

0. 스크롤 발생 함수를 작성한다.

주의할 점
채팅메세지가 추가됨에 따라 scrollHeight의 수도 증가한다.
그러므로 스크롤 위치 값을 가변적으로 얻어야한다.

최하단으로 스크롤할 경우 scrollTop의 값
MaxScrollY = scrollH - scrolMask;

  function scrollBottom() {
        let scrollH = $('#wrap').prop('scrollHeight');
        let scrolMask = $('#wrap').prop('clientHeight');
        let MaxScrollY = scrollH - scrolMask;
        $('#wrap').scrollTop(MaxScrollY);
        console.log('scroll amount : ', MaxScrollY);

        console.log('scrollHeight : ', $(this).prop('scrollHeight'));
      }

      $('#wrap').scroll(function () {
        console.log('scrollTop : ', $(this).scrollTop());
        console.log('scrollHeight : ', $(this).prop('scrollHeight'));
        console.log('clientHeight : ', $(this).prop('clientHeight'));
        console.log('offsetHeight : ', $(this).prop('offsetHeight'));
      });
    </script>

1. 자바스크립트로 DOM이 모두 생성된 직후 스크롤이벤트가 발생하게 한다.

(상대에게서 메세지 전송받은 후에도 DOM을 재렌더링하므로 위 방법으로 이 경우도 커버 가능함)

해결 : 스크롤 발생 함수를 DOM 생성 함수 호출 이후에 작성한다

 function createDOM() {
    db.collection('chatroom')
      .doc(chatroomID)
      .collection('messages')
      .orderBy('date')
      .onSnapshot((doc) => {
        // DB 데이터로 DOM 생성하기 전에 내용 비워준다.

        $('#wrap').html('');

        (중략)
      
        // DOM 생성완료 후 스크롤을 최하단으로 내린다
        scrollBottom();
      });
  }

2. 내가 메세지 보낸 후

메세지 전송 함수가 호출된 후 스크롤 함수를 호출한다.

      //  메세지 전송 시 DB내 chatroom > messages 콜렉션에 저장한다
      $('#send').click(() => {
        var data = {
          content: $('#chat-input').val(),
          date: new Date(),
          uid: myUID,
        };

        db.collection('chatroom')
          .doc(chatroomID)
          .collection('messages')
          .add(data)
          .then(() => {
            console.log(chatroomID + ' 채팅방에 메세지 저장 완료');
            // 전송 후 input 비운다
            $('#chat-input').val('');
            scrollBottom();
          });
      });