CSS 가로 스크롤: 단계별 가이드

웹사이트의 모든 세로 스크롤이 지겨우신가요? 오늘은 CSS를 이용하여 간단한 가로 스크롤 페이지를 만들어 보겠습니다.

CSS Horizontal Scroll: a Step-by-Step Guide

Overview

HTML

CSS

Notes

개요

핵심 개념은 컨테이너를 90도 회전한 다음 자식 요소를 뒤로 90도 회전하여 컨테이너의 회전에 대응하는 것입니다.



다음은 우리가 구축할 것의 live demo입니다.

전체 코드here를 찾을 수 있습니다.

HTML

이를 염두에 두고 정말 빠르게 구축할 수 있습니다. HTML부터 시작해 봅시다.

<div class="container">
  <div>
    <img src="./images/image1.jpeg" alt="" />
    <p>image 1</p>
  </div>
  <div>
    <img src="./images/image2.jpeg" alt="" />
    <p>image 2</p>
  </div>
  <div>
    <img src="./images/image3.jpeg" alt="" />
    <p>image 3</p>
  </div>
  <div>
    <img src="./images/image4.jpeg" alt="" />
    <p>image 4</p>
  </div>
  <div>
    <img src="./images/image5.jpeg" alt="" />
    <p>image 5</p>
  </div>
  <div>
    <img src="./images/image6.jpeg" alt="" />
    <p>image 6</p>
  </div>
  <div>
    <img src="./images/image7.jpeg" alt="" />
    <p>image 7</p>
  </div>
  <div>
    <img src="./images/image8.jpeg" alt="" />
    <p>image 8</p>
  </div>
</div>

CSS

CSS 코드는 좀 더 복잡하지만 개념은 위에서 다루었습니다. 신중하고 점진적으로 코딩하면 됩니다.

큰 그림부터 시작하여 페이지에 구조를 부여해 보겠습니다.

.container {
  /* 
  Width and height will swap after rotation. 
  To make the container as wide as the screen after rotation,
  we need to set its initial height to 100vw.
  */
  width: 500px;
  height: 100vw;
}
.container div {
  width: 100%;
  height: 500px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

이제 페이지는 다음과 같아야 합니다. 아직 우리가 원하는 것과는 거리가 멀다.



컨테이너를 90도 회전하고 자식을 90도 뒤로 회전시켜 보겠습니다.

.container {
  ...
  /*
  translateY(-500px) makes the container align
  to the left of the screen.
  */
  transform: rotate(-90deg) translateY(-500px);
  transform-origin: top right;
}
.container div {
  ...
  transform: rotate(90deg);
}

이제 우리가 기대하는 것과 더 가까워졌지만 아직 가로로 스크롤할 수 없습니다.



가로로 스크롤 가능하게 만드는 것은 두 줄의 코드를 추가하는 것만큼 쉽습니다.

.container {
  ...
  overflow-x: hidden;
  overflow-y: auto;
}

일부 청소 및 광택 작업을 제외하고 거의 완료되었습니다. 다음 코드를 추가해 보겠습니다.

body {
  margin: 0;
}
/*
To hide the scroll bar.
*/
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
img {
  ...
}
.container div {
  ...
  position: relative;
  margin: 10px 0;
}
.container div:first-child {
  margin: 0;
}
p {
  padding: 10px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

최종 페이지는 다음과 같으며 가로로 스크롤되어야 합니다.



다음은 완전한 CSS 코드입니다.

body {
  margin: 0;
}
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  width: 500px;
  height: 100vw;
  transform: rotate(-90deg) translateY(-500px);
  transform-origin: top right;
  overflow-x: hidden;
  overflow-y: auto;
}
.container div {
  position: relative;
  width: 100%;
  height: 500px;
  transform: rotate(90deg);
  margin: 10px 0;
}
.container div:first-child {
  margin: 0;
}
p {
  padding: 10px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

메모

이 예에서는 제곱 자식 요소(500 * 500 이미지)를 사용했으며 여기에는 이유가 있습니다. 너비:높이 비율이 1:1이 아닌 경우 회전 후 하위 요소가 서로 겹치지 않도록 오프셋을 얼마만큼 계산해야 합니다.

이러한 경우와 고급 기능 또는 효과의 경우 일부 javacript 코드를 작성할 수 있습니다.