마우스 스크롤 위치 파악 후 이벤트발생
mounted
methods: {
updateScroll(){
this.scrollTopPosition = window.scrollY;
//window.scrollY 현재의 스크롤바 위치 (창의 최상단으로 잡힘)
},
scrollValue(){
this.scrollBottomPosition = this.scrollTopPosition + window.innerHeight;
// window.innerHeight = 윈도우 창 높이를 통해 감지하는 위치를 창의 최하단으로 변경함
this.objectYOffset1 = this.$refs.position1.offsetTop + this.$refs.position1.offsetHeight / 2
//$refs로 dom이 페이지 최상단으로부터 어느 위치에 있는지 확인하고 dom높이의 절반에서 이벤트를 발생시키기 위해 dom의 높이 나누기 2를 해줌
},
scrollEvent(){
// 윈도우 스크롤 하단부분이 내가 선택한 dom의 절반부분에 이르렀을 떄
// slideShow를 true 로 만듦
if(this.scrollBottomPosition >= this.objectYOffset1){
this.slideShow1 = true;
},
},
mounted(){
window.addEventListener('scroll', this.scrollValue)
window.addEventListener('scroll', this.updateScroll);
window.addEventListener('scroll', this.scrollEvent);
},