JavaScript 화면 단위 스크롤 1편

 

const wrap = document.getElementsByClassName('wrap')[0];
const container = document.getElementsByClassName('box');
let page = 0;
const lastPage = container.length - 1; 
console.log(lastPage);

window.addEventListener('wheel', (e) => {
    //e.preventDefault();
    if (e.deltaY > 0) {
        page++;
    } else if (e.deltaY < 0) {
        page--;
    } 
    if (page < 0) {
        page=0;
    } else if (page > lastPage) {
        page = lastPage;
    }
    console.log(e.deltaY)
    wrap.style.top = page * -100 + 'vh'; 
}, {passive:false});

출처 : jjaong34.tistory.com/2

 

자바스크립트 2일차..

일단 나는 여기에 나오는 addEventListener, deltaY, preventDefault 등등

각자 어떤 역할을 하고 있는지 전혀 이해하지 못하고

코드를 적었는데 기능이 되었다.

 

스스로 너무 답답한 나머지

이 코드를 전부 이해해야겠다는 생각이 들어

하나하나 분해해보려고 한다.

 

먼저 addEventListener

문법을 살펴보니

.addEventListener("이벤트 종류", 함수이름)

이렇게 작성된다고 한다.

https://makeit80.tistory.com/13

addEventListener

자세한건 여기서 살펴볼 수 있다.

 

deltaY는 스크롤 크기를 조회하는 메서드였다.

https://makeit80.tistory.com/14

deltaY

생각보다 간단해서 당황..

 

 

코드를 쭉 훑어보며 모르는 부분을 하나하나 지워가니

어떤 느낌으로 작성했는지 조금 감이 온 것 같다..!

 

const wrap = document.getElementsByClassName('wrap')[0];
const container = document.getElementsByClassName('box');
let page = 0;
const lastPage = container.length - 1; 
console.log(lastPage);

window.addEventListener('wheel', (e) => {
    e.preventDefault(); // 이건 무슨 이벤트를 막아주는거지..?
    if (e.deltaY > 0) { // 유저가 내릴 때 deltaY값이 양수가 되니 페이지를 ++ 
        page++;
    } else if (e.deltaY < 0) { // 유저가 올릴 때 deltaY값이 음수가 되니 페이지를 --
        page--;
    } 
    if (page < 0) { // 페이지가 음수가 되지 않게 막아주는 것?
        page=0;
    } else if (page > lastPage) { // 만약 페이지가 전체 페이지 수보다 크다면 같도록 정정
        page = lastPage;
    }
    console.log(e.deltaY)
    wrap.style.top = page * -100 + 'vh'; // 왜 음수를 곱하는거지? 양수를 하니까 페이지가 거꾸로 넘어감
}, {passive:false});

이렇게 끄적이면서 나름 분석..해보았다

 

window.addEventListener('wheel', (e) => {
    e.preventDefault();
    e.deltaY > 0 ? page++ : page--;
    // 삼항연산자로 간결하게 줄이고
    if (page < 0) {
        page = 0;
    } else if (page > lastPage) {
        page = lastPage;   
    } else {
        wrap.style.top = page * -100 + 'vh'; 
    }
    // 스크롤 계산식은 끝페이지 인 경우 불필요한 계산이 되기 때문에 조건문 마지막에 넣어주었다.
}, {passive:false}); // 아 페이지를 내리면 페이지 1이 되는데 이땐 내려야하니 -로 곱하고
// 올릴 땐 -1이 되니까 곱하면 +가 되면서 올라가는구나

// *****스크롤 내릴 때 한 틱마다 한 단위를 내려가게 되는데,
// 그렇게 말고 스크롤 움직임이 있으면 내려가는 모션 시간동안은
// 1 움직임으로 인식하게 할 순 없을까?

근데 문제가 있었다.

스크롤 한 틱마다 한 페이지가 넘어가게 되는데, 유저 입장으로 스크롤 하나만 움직이지 않기 때문이다.

그래서 평소처럼 스크롤을 하면 페이지가 끝까지 내려가버렸다..

스크롤 이벤트가 발생하면 내려가는 시간 동안

1페이지만 움직이도록 이후 모션은 무시하는 코드가 필요해보였다.

어떻게 하지...?