scroll 방향 감지하기 (with. js)

1. 미리보기

See the Pen scroll direction by KumJungMin (@kumjungmin) on CodePen.

2. 코드 해석

html, css는 스크롤을 발생시키기 위한 사전 작업이다.
만약 scroll 방향 감지 코드를 보고 싶다면 js로 바로 이동하자.

1) html

• scroll을 발생시키기 위해 아래와 같이 dom을 구성했다.

<div class="scroll-area">
  <div class="text">Scroll</div>
  <div class="content"></div>
</div>

2) css

(1) 기본 스타일 설정하기

• 기본적으로 margin값이 설정되어 있으므로 0으로 변경해준다.

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

• text는 down, up 글자를 나타내는 역할을 한다. 스타일은 간단히 보자.

.text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.5em;
  color: #fff;
  font-weight: 700;
  font-style: italic;
}

(2) scroll-area 스타일 주기

scroll-area에서 스크롤 이벤트를 감지할 예정으므로 overflow 지정을 해주자!

.scroll-area {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 10px solid #fff;
  background-color: #d6d6d6;
}

• 너비는 100%로 주고, 높이는 화면 높이로 지정한다.
• overflow-y에 scroll을 주어 자식이 넘치는 경우 스크롤을 발생시킨다.

(3) content의 높이를 높게~

.content {
  width: 100%;
  height: 400vh;    /*부모보다 크게해야 스크롤 발생*/
  border: 10px solid #d6d6d6;
}

• scroll-area의 자식인 content의 높이를 부모 높이보다 크게 설정한다.

3) js

dom도 준비됐겠다, 이제 js를 사용해 스크롤 방향을 감지하자

(1) dom 가져오기

const area = document.querySelector('.scroll-area');  //[1]
const textDom = document.querySelector('.text');      //[2]

• scroll-area에서 스크롤이 발생하므로 해당 요소를 가져온다. [1]
• 스크롤 방향을 화면에 띄우기 위해 text 요소를 가져온다. [2]

(2) 필요한 변수 선언하기

let prevScroll = 0;  //[1]
let text;     //[2]
let bgColor;  //[2]

• 이전 스크롤 값을 저장하기 위한 변수이다. [1]
• text, bgColor에는 스크롤 방향에 따라 다른 글자와 배경색을 할당해준다. [2]

(3) scroll 이벤트 추가하기

area.addEventListener('scroll', getScrollDirection)  //[1]

• area에 scroll 이벤트 발생시, getScrollDirection함수를 실행시킨다. [1]

function getScrollDirection() {
  const currScroll = this.scrollTop; //[2]
  if (prevScroll > currScroll) {     //[3]
    text = 'Up'; 
    bgColor = '#eb739b';
  }
  else {
    text = 'Down';
    bgColor = '#ba72db';
  }
  prevScroll = currScroll;          //[4]
  textDom.innerText = text;
  area.style.backgroundColor = bgColor;
}

• 현재 스크롤 위치를 currScroll에 저장한다. [2]
• 만약 prevScroll > currScroll이면 방향은 Up이 된다. 반대는 Down이 된다. [3]
• prevScroll, currScroll 조건 판단 후, 현재 스크롤값을 prevScroll에 저장해주면 된다. [4]