웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요! 웹이즈프리입니다. 오늘은 자바스크립트에서 휠을 사용한 스크롤 이벤트 발생시 스크롤의 방향을 알아내는 방법에 대하여 알아봅니다.
@ 스크롤 방향은 언제 필요할까?
스크롤을 한 번 이동할 때 하나의 화면 전체를 전환하는 웹페이지를 만들 수 있겠죠. 이 경우 스크롤의 방향을 알아야 이전 또는 다음 화면을 보여 줄 수 있으므로 필요할 수 있습니다.
먼저 스크롤 이동시 wheel 이벤트와 deltaY에 대해 알아보죠. 사용자가 마우스 휠을 돌렸을 때 발생하는 스크롤의 수직 방향의 변화량이 바로 `deltaY`입니다. 반대로 수평 이동값을 얻으려면 바로 deltyX가 사용됩니다. 이 경우 deltaY의 값이 양수라면 아래로, 음수라면 위로 스크롤이 이동 된 것을 의미합니다.
event.deltaY
이처럼 deltaY의 값을 알 수 있다면 어느 방향으로 스크롤이 이동했는지 보다 간단하게 확인할 수 있습니다. 아래 간단한 예제를 만들어보겠습니다.
아래는 간단한 휠 이벤트 예제입니다. wheel 이벤트가 발생할 경우 아래로 스크롤 이동 또는 위로 스크롤 이동이라는 문구를 콘솔에 출력하게됩니다.
매우 간단하죠! 이와같이 간단하게 휠을 사용한 스크롤 방향을 감지하려면 위 코드를 활용하여 사용하시면 됩니다.
위 방법이 wheel 사용시 가장 간단한 방법이지만 다른 방법 역시 가능합니다. 스크롤 방향을 알아내는 또 다른 방법은 바로 현재의 스크롤 위치(`scrollY` 혹은 `pageYOffset`)를 사용하는 방법입니다. 즉 이전 스크롤 위치와 현재 스크롤 위치를 서로 비교하여 스크롤 방향을 알 수 있죠.
아래 예제 코드를 먼저 봐주세요. 아래는 스크롤 이벤트가 발생할 경우 현재의 스크롤 위치를 lastScroll 변수에 저장합니다. 이를 비교하면 스크롤의 방향을 역시 간단하게 비교하여 알 수 있게됩니다.
이 방법도 비교적 간단한 방법입니다. 변수에 값을 저장하는 점이 차이점입니다.
만약 마우스휠을 사용하여 이동하는 경우가 대부분이라면 개인적으로는 deltaY를 활용한 첫 번째 방법이 코드가 간결하고, 스크롤의 방향을 즉각적으로 감지할 수 있기 때문에 더 선호합니다. 하지만 휠 뿐만 아니라 전체적인 스크롤 이동의 경우처럼 다양하다면? 이 때는 두 번째 방법인 이 전의 스크롤 위치 값과 비교한 방법이 더 다양한 형태로 사용될 수 있기 때문에 선호됩니다.키보드나 스크롤을 마우스 클릭하는 경우 wheel 이벤트를 통해서 방향을 알아내는 것이 어렵기 때문이죠!
여기까지 스크롤의 방향을 알아낼 수 있는 방법을 간략하게 알아봤습니다. 위 내용을 요약하면 아래와 같습니다.
1. `deltaY`는 마우스 휠 스크롤의 수직 변화량을 나타냅니다.
2. `deltaY`의 값이 양수면 아래로, 음수면 위로 스크롤 되었다는 것을 알 수 있습니다.
3. 스크롤 위치를 기반으로한 방법도 있지만, `deltaY`가 더 간편하다고 생각합니다.
4. 필요에 따라 적합한 방법을 선택하시길 바랍니다.
5. 스크롤 방향 감지는 UX 향상에 유용하게 사용될 수 있습니다.
여기까지 마우스 휠(wheel)을 사용하는 경우 마우스의 수직 이동 방향을 알아내는 방법에 대하여 간단하게 알아보았습니다!
❝
스크롤이 위로 이동하는 지 아래로 이동하는지 방향을 알 수 있을까?
❞
스크롤이 위로 이동하는 지 아래로 이동하는지 방향을 알 수 있을까?
❞
@ 스크롤 방향은 언제 필요할까?
스크롤을 한 번 이동할 때 하나의 화면 전체를 전환하는 웹페이지를 만들 수 있겠죠. 이 경우 스크롤의 방향을 알아야 이전 또는 다음 화면을 보여 줄 수 있으므로 필요할 수 있습니다.
# 자바스크립트 휠(Wheel) 이벤트와 deltaY 알아보기
먼저 스크롤 이동시 wheel 이벤트와 deltaY에 대해 알아보죠. 사용자가 마우스 휠을 돌렸을 때 발생하는 스크롤의 수직 방향의 변화량이 바로 `deltaY`입니다. 반대로 수평 이동값을 얻으려면 바로 deltyX가 사용됩니다. 이 경우 deltaY의 값이 양수라면 아래로, 음수라면 위로 스크롤이 이동 된 것을 의미합니다.
event.deltaY
이처럼 deltaY의 값을 알 수 있다면 어느 방향으로 스크롤이 이동했는지 보다 간단하게 확인할 수 있습니다. 아래 간단한 예제를 만들어보겠습니다.
스크롤 wheel 이벤트 사용 예제
아래는 간단한 휠 이벤트 예제입니다. wheel 이벤트가 발생할 경우 아래로 스크롤 이동 또는 위로 스크롤 이동이라는 문구를 콘솔에 출력하게됩니다.
document.addEventListener('wheel', function(event) {
if(event.deltaY > 0) {
console.log("아래로 스크롤 이동");
} else {
console.log("위로 스크롤 이동");
}
});
if(event.deltaY > 0) {
console.log("아래로 스크롤 이동");
} else {
console.log("위로 스크롤 이동");
}
});
매우 간단하죠! 이와같이 간단하게 휠을 사용한 스크롤 방향을 감지하려면 위 코드를 활용하여 사용하시면 됩니다.
[참고] 다른 방법은 없을까? 이전 스크롤의 위치 값 활용하기
위 방법이 wheel 사용시 가장 간단한 방법이지만 다른 방법 역시 가능합니다. 스크롤 방향을 알아내는 또 다른 방법은 바로 현재의 스크롤 위치(`scrollY` 혹은 `pageYOffset`)를 사용하는 방법입니다. 즉 이전 스크롤 위치와 현재 스크롤 위치를 서로 비교하여 스크롤 방향을 알 수 있죠.
아래 예제 코드를 먼저 봐주세요. 아래는 스크롤 이벤트가 발생할 경우 현재의 스크롤 위치를 lastScroll 변수에 저장합니다. 이를 비교하면 스크롤의 방향을 역시 간단하게 비교하여 알 수 있게됩니다.
let lastScroll = 0;
document.addEventListener('scroll', function() {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if(currentScroll > lastScroll) {
console.log("아래로 스크롤됨");
} else {
console.log("위로 스크롤됨");
}
lastScroll = currentScroll;
});
document.addEventListener('scroll', function() {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if(currentScroll > lastScroll) {
console.log("아래로 스크롤됨");
} else {
console.log("위로 스크롤됨");
}
lastScroll = currentScroll;
});
이 방법도 비교적 간단한 방법입니다. 변수에 값을 저장하는 점이 차이점입니다.
두가지 방법의 장단점은 무엇일까?
만약 마우스휠을 사용하여 이동하는 경우가 대부분이라면 개인적으로는 deltaY를 활용한 첫 번째 방법이 코드가 간결하고, 스크롤의 방향을 즉각적으로 감지할 수 있기 때문에 더 선호합니다. 하지만 휠 뿐만 아니라 전체적인 스크롤 이동의 경우처럼 다양하다면? 이 때는 두 번째 방법인 이 전의 스크롤 위치 값과 비교한 방법이 더 다양한 형태로 사용될 수 있기 때문에 선호됩니다.키보드나 스크롤을 마우스 클릭하는 경우 wheel 이벤트를 통해서 방향을 알아내는 것이 어렵기 때문이죠!
마무리: 요약하기
여기까지 스크롤의 방향을 알아낼 수 있는 방법을 간략하게 알아봤습니다. 위 내용을 요약하면 아래와 같습니다.
1. `deltaY`는 마우스 휠 스크롤의 수직 변화량을 나타냅니다.
2. `deltaY`의 값이 양수면 아래로, 음수면 위로 스크롤 되었다는 것을 알 수 있습니다.
3. 스크롤 위치를 기반으로한 방법도 있지만, `deltaY`가 더 간편하다고 생각합니다.
4. 필요에 따라 적합한 방법을 선택하시길 바랍니다.
5. 스크롤 방향 감지는 UX 향상에 유용하게 사용될 수 있습니다.
여기까지 마우스 휠(wheel)을 사용하는 경우 마우스의 수직 이동 방향을 알아내는 방법에 대하여 간단하게 알아보았습니다!
아래의 글도 찾고 계시지 않나요?
