Vue - Scroll Event

Vue를 이용해서 Scroll Event를 쉽게 처리할 수 있다.

 

기존 자바스크립트를 이용하면 window.addEventListener ... 등의 코드를 이용해서 사용한다.

 

Vue를 최대한 활용해서 적용하였다.

 

<template>
	<v-container id="main">
		<div v-scroll:#main="handleScroll">
    			.......
    		</div>
	</v-container>
</template>


<script>
export default{
	data() {
		return {
			scrollPostion = 0
    		}
	}


	method: {

		handleScroll(e){
			this.scrollPostion = e.target.scrollTop;

			if(this.scrollPosition > 100){
				console.log("UP")
			} else {
				console.log("DOWN")
			}

		}
	}
</script>

 

 

 

간단하게 설명하면.

 

1. v-container 에 id 값을 준다.

- 이렇게 되면 v-container 태그 안에 있는 내용이 스크롤링 된다.

 

2. v-scorll:#main="handleScroll" 코드로 main id값을 가진 태그에서 scroll 이벤트가 발생하면 handleScroll method가 실행되도록 한다.

 

3. data 영역에 scrollPostion을 선언한다.

 

4. handleScroll(e) method를 통해 e.target.scrollTop 값을 scrollPosition에 넣어주고 해당 값을 기준으로 어떤 액션을 할지 정하면 된다.

 

아주 쉽게 구현이 가능하다.