[VUE] 스크롤 방향 체크해서 화살표 모양 바뀌게 하기

스크롤에 따라서 화살표 바뀌기

 

 

 

첫 화면에서 보이는 화살표이다. 

 

스크롤을 내리면 화살표가 바뀌고 background 컬러가 생긴다.

 

 

---

 

scrDown.vue 컴포넌트를 만든다.

 

 

.scr-down // 기본형

.scr-down.bg-on // 하얀 배경색이 생김

.scr-down.on // 화살표 모양이 바뀜

.scr-down.hidden // hide

<template>
	<a href="#" class="scr-down"><i></i></a>
</template>

<script>
	export default {
		props: ['ScrDown']
	}
</script>

<style lang="scss" scoped>
	$borderW:50px;

	.hidden {
		bottom: -100% !important;
	}

	.scr-down {
		position: fixed;
		bottom: -4PX;
		left: 50%;
		transform: translateX(-50%);
		width: 58px;
		height: 28px;
		background-color: transparent;
		border-top-left-radius: $borderW;
		border-top-right-radius: $borderW;
		z-index: 10;
		transition: all 0.3s cubic-bezier(1, 0, 0, 1);

		&.bg-on {
			background-color: #fff;
		}

		i {
			@include flex(flex, center, center);
			width: 100%;
			height: 100%;
			position: relative;

			&::before,
			&::after {
				width: 9px;
				height: 2px;
				background-color: #000;
				transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
			}

			&::before {
				content: '';
				transform: rotate(225deg);
			}

			&::after {
				content: '';
				transform: rotate(135deg);
				margin-left: -3px;
			}
		}

		//on
		&.on i {
			&::before {
				content: '';
				transform: rotate(135deg);
			}

			&::after {
				content: '';
				transform: rotate(225deg);
			}
		}
	}
</style>

 

---

 

전체 컴포넌트를 감싸는 index.vue 에서 스크롤을 제어한다.

 

class를 조건에 따라 바인딩한다.

 

스크롤이 내려갈때는 보이면 안되니까 hidden을 더해주고,

스크롤이 올라갈때는 첫화면 빼고는 스크롤 아이콘에 background가 있으니까 따로 계산할 필요없이

offset값이 200 이상일때는 bg-on과 on을 더해준다.

 

 

스크롤이 움직일 때마다 onScroll 이벤트를 mounted 해준다.

 

data 값에는 기본 셋팅을 한다. 모든 class 바인딩을 true해서 조건을 받으면 바뀌게 셋팅하고

스크롤할때마다 바뀔 이전 값들을 0으로 셋팅해준다.

 

onScroll 에서는 내가 원하는 조건에 맞춰서 스크립트를 짜면된다.

 

<template>
  <div>
    <!-- scr down -->
    <scrDown ref="scrDown" :class="{'hidden' : !showScrDown, 'on' : !showScrDownOn, 'bg-on' : !bgOn}"></scrDown>
  </div>
</template>

<script>
  import ScrDown from './scrDown.vue';

  export default {
    name: 'App',
    components: {
      ScrDown
    },
    mounted() {
      this.lastScrollPosition = window.scrollY
      window.addEventListener('scroll', this.onScroll)
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.onScroll)
    },
    data() {
      return {
        showScrDown: true,
        showScrDownOn: true,
        bgOn: true,
        lastScrollPosition: 0,
        scrollValue: 0
      }
    },
    methods: {
      onScroll() {
        let pageY = window.scrollY
        let footer = document.querySelector('.section7')
        let footerTop = (footer.offsetTop - footer.clientHeight) + 300
        if (pageY < 0) {
          return
        }
        if (Math.abs(pageY - this.lastScrollPosition) < 60) {
          return
        }
        //hidden
        this.showScrDown = pageY < this.lastScrollPosition || pageY > footerTop
        //on
        this.showScrDownOn = pageY < 200
        //bgOn
        this.bgOn = pageY < 200
        this.lastScrollPosition = pageY
      }
    }
  }
</script>

 

 

 

 

---

 

출처, 참고 :

medium.com/@Taha_Shashtari/hide-navbar-on-scroll-down-in-vue-fb85acbdddfe

codepen.io/tahazsh/pen/wNOvyK