[vuejs] scroll event 화면 맨 아래에 도달했을 때 실행 조건

배경설명

• scroll을 하여 이용내역 화면 맨 아래에 도달했을 때 이용내역 리스트를 조회하여 append
• 기존 jquery로 되어 있는 것을 vuejs 방식으로 변환해보자!

jquery 활용

$("#tagId> div").scroll(function() {
	if ($(this).scrollTop() + $(this).height()) + 1 >= $(this).prop("scrollHeight")) {
		// 스크롤이 맨 아래에 도달했을 때 실행할 코드
	}
});

• 소스 설명

소스	설명
$("#tagId> id").scroll(function() {...});	id가 tagId인 요소 아래의 div 태그에 scroll event listener 추가
scrollTop()	스크롤된 컨테이너 위쪽에서부터 거리
height()	요소의 높이 반환
+1	1을 더해주지 않으면 최초 1회만 실행되는 등 정상 동작 안함 (보호장치)
prop("scrollHeight")	요소의 스크롤 가능한 총 높이

vuejs 전환

• html

<div id="app">
  <div ref="scrollArea" @scroll="handleScroll">
    <!-- 스크롤 먹일 영역 -->
  </div>
</div>

• javascript

methods: {
	handleScroll() {
    	const scrollEl = this.$refs.scrollArea;
      	if (scrollEl.scrollTop + scrollEl.clientHeight + 1 >= scrollEl.scrollHeight) {
        // 스크롤이 맨 아래에 도달했을 때 실행할 코드
	},
},

결론

• jquery, vuejs에서 scroll 이벤트를 통해 화면 맨 아래 도달 시점을 잡을 수 있음