마우스 스크롤 이벤트

Sonak·2022년 8월 16일

마우스 스크롤 위치 파악 후 이벤트발생

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);
    },
profile
초보.

0개의 댓글