마우스 휠을 움직이면 웹페이지 가로스크롤 작동 시키는 방법
보통 마우스의 휠은 세로 스크롤을 작동시키는데 사용하는데요.
이번에 테스트로 만든 페이지의 가로의 양이 상당해서 아래쪽에 가로스크롤을 마우스로 움직이는데 상당히 거슬려서 만들어 보게 된것입니다.
▶ JavaScript에서 wheel 이벤트 감지
- event.deltaY 값(세로 스크롤)을 감지하여 가로 스크롤(scrollLeft)을 이동
- event.preventDefault();로 기본 세로 스크롤 방지
<!DOCTYPE html>
<html>
<head>
<title>화면 출력</title>
<style>
html {
font-size: 10px;
}
</style>
<script>
document.addEventListener("wheel", function(event) {
if (event.deltaY !== 0) {
event.preventDefault();
document.documentElement.scrollLeft += event.deltaY;
}
}, { passive: false });
</script>
</head>
마우스의 휠을 움직이면 가로 스크롤이 움직이는 방식 입니다.