마우스 휠 스크롤을 가로 이동 변경 섹션형 웹사이트 HTML/CSS/스크립트
웹사이트 마우스 스크롤로 세로에서 가로 이동 구현하기 (HTML/CSS/스크립트)
웹사이트를 만들다 보면 “요즘 사이트들은 왜 이렇게 부드럽게 넘어가지?” 싶은 순간이 있습니다. 제품 소개, 포트폴리오, 이벤트 페이지처럼 섹션을 크게 보여주는 화면에서는 휠 스크롤을 가로 이동으로 바꿔 콘텐츠를 넘기는 방식이 꽤 자주 쓰입니다.
다만 아무렇게나 적용하면 트랙패드에서 튀거나, 모바일에서 어색해지거나, 스크롤 막힘 때문에 답답하게 느껴질 수 있습니다. 그래서 “가로 이동이 자연스럽게 느껴지는 최소 구성”부터 잡아두고, 필요하면 섬세하게 조정하는 쪽이 결과가 좋습니다.
요즘 가장 핫한 웹사이트 트렌드 중 하나는 마우스 스크롤 시 가로 스크롤링 기능을 활용한 구성입니다. 티스토리 스킨, 워드프레스 테마, 랜딩 페이지처럼 “섹션 단위로 넘겨 보여주는” 화면에서 특히 잘 어울립니다.
가로 이동을 위한 기본 HTML 구조
먼저 필요한 HTML 구조부터 간단히 잡습니다. 아래 예시는 “가로로 넘어갈 섹션”을 box로 만들어 둔 형태입니다.
<body>
<div class="container">
<div class="box">box0</div>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body>이 코드에서 .container는 가로로 이동할 섹션들을 감싸고, 각 .box는 한 화면(한 섹션)처럼 동작합니다.
CSS: 화면 한 장씩 보이도록 세팅
아래 CSS는 섹션을 “한 화면 높이(100vh)”로 잡고, 경계를 확실히 보여주기 위해 border를 준 예시입니다.
<style>
body { margin: 0;}
.container {
/* transition: all 0.5s; */
}
.box {
/* 아래 두 줄은 제이쿼리 부분에서 box에 CSS를 주는 거 없을 때 필요 */
/* float: left;
width: calc(100% / 4); */
height: 100vh;
font-size: 100px;
line-height: 100vh;
text-align: center;
border: 10px solid;
box-sizing: border-box;
}
</style>여기까지는 “섹션을 크게 보여주기 위한 뼈대”에 가깝고, 실제 가로 이동은 스크립트에서 처리합니다.
jQuery로 휠 스크롤을 가로 이동으로 연결
이제 휠 입력을 받아서, 아래로 돌리면 다음 섹션으로, 위로 돌리면 이전 섹션으로 이동하도록 연결합니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var container = $(".container");
var boxes = $(".box");
var currentIndex = 0;
// 휠 스크롤 이벤트 처리
$(window).on("wheel", function(event) {
event.preventDefault();
var delta = event.originalEvent.deltaY;
if (delta > 0 && currentIndex < boxes.length - 1) {
currentIndex++;
} else if (delta < 0 && currentIndex > 0) {
currentIndex--;
}
var scrollTo = currentIndex * $(window).width();
container.animate({ scrollLeft: scrollTo }, 500);
});
// 브라우저 리사이즈 처리
$(window).on("resize", function() {
var scrollTo = currentIndex * $(window).width();
container.scrollLeft(scrollTo);
});
});
</script>이 코드가 하는 일은 단순합니다. 현재 섹션 인덱스(currentIndex)를 유지하고, 휠 방향에 따라 인덱스를 올리거나 내린 뒤 scrollLeft를 “화면 너비 단위”로 이동시키는 방식입니다.
참고 : [IT 리뷰/윈도우 Tip] - 마우스 휠 스크롤 안될 때 오류 해결방법
같은 화면인데 더 자연스럽게 보이게 만들기
실제로 적용해보면 브라우저/마우스/트랙패드에 따라 체감이 달라질 수 있습니다. 특히 트랙패드에서는 휠 이벤트가 연속으로 많이 들어와서 한 번 스크롤했는데 섹션이 두세 칸씩 튀는 느낌이 날 때가 있습니다.
이런 경우에는 아래처럼 “한 번 움직이면 잠깐 입력을 막는 방식”을 섞거나, 애니메이션 시간을 줄여 반응을 빠르게 만드는 조합이 꽤 잘 맞습니다. 독자가 느끼는 건 코드가 아니라 리듬이라서요.
섹션 이동이 튈 때 체크할 것
- 휠 입력이 짧게 여러 번 들어오는 환경(트랙패드/고감도 마우스)인지
- 애니메이션 시간이 길어서 “입력 누적”이 발생하는지
- 컨테이너가 실제로 가로 스크롤 영역이 맞는지(overflow-x)
- 모바일에서 같은 동작을 강제로 막고 있지는 않은지(사용성 저하)
CSS만으로도 감각을 확 올리는 방법
섹션을 “딱딱 맞춰” 멈추게 하고 싶다면, 최근에는 스크롤 스냅(scroll-snap) 스타일을 섞는 경우가 많습니다. 스크립트에 의존하는 느낌을 줄이고, 스크롤 정렬이 더 단정해집니다.
<style>
.container{
overflow-x: auto;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
.box{
display: inline-block;
width: 100vw;
scroll-snap-align: start;
}
</style>이렇게 해두면 스크립트로 이동시키더라도 섹션이 끝에서 흐물흐물 멈추는 느낌이 줄어듭니다.
Q. 가로 스크롤로 바꾸면 SEO나 체류에 불리하지 않나요?
A. “내용 접근이 쉬운지”가 핵심입니다. 섹션마다 텍스트가 충분히 있고, 모바일에서 억지로 가로 이동을 강요하지 않으면 오히려 몰입감이 좋아지는 경우도 많습니다. 반대로 본문 텍스트가 적고 효과만 많으면 금방 나가게 됩니다.
Q. 트랙패드에서 한 번에 두 칸씩 넘어가요.
A. 휠 이벤트가 빠르게 연속으로 들어오는 환경이라서 그렇습니다. 애니메이션 시간(500ms)을 줄이거나, 섹션 이동 중에는 입력을 잠깐 막는 플래그를 두면 체감이 훨씬 안정됩니다.
Q. 모바일에서는 어떻게 처리하는 게 보통인가요?
A. 모바일은 기본 세로 스크롤을 유지하고, 가로 구간은 슬라이드/카드 형태로 부분 적용하는 방식이 많습니다. 전체 페이지를 가로로 강제하면 답답해지는 경우가 흔합니다.
Q. container가 실제로 가로로 안 움직입니다.
A. container에 overflow-x가 열려 있어야 하고, box들이 가로로 나열되어야 합니다. 스킨/테마 CSS가 display/float/flex를 덮어쓰는 경우도 많아서, 개발자도구에서 container와 box의 실제 레이아웃부터 확인하면 빠릅니다.
Q. 스크롤이 막히는 느낌이 들어요.
A. event.preventDefault()가 전체 스크롤을 강제로 막기 때문에 그런 체감이 나올 수 있습니다. 가로 섹션 구간에서만 휠을 가로 이동으로 바꾸고, 그 외 영역은 기본 세로 스크롤을 살리는 형태가 보통 더 편합니다.