모바일 제스처 스와이프, CSS 두 줄로 간단하게 만들기(가로스크롤)

 

모바일에서 좌/우로 넘기는 제스처를 스와이프라고 한다.

흔히 모바일 쇼핑 어플등에서 스와이프 제스처를 안 써본 사람은 없을것이다.

아래는 스와이프가 되는 박스(div) 안에 넣어야 할 CSS 코드이다.

 

1. 스와이프 박스 만들기

스와이프를 원하는 구간에 아래의 코드를 넣는다. 가로스크롤을 만드는것이다.

.box {
  overflow-x: auto;
  white-space: nowrap;
}

 

2. 가로 스크롤 없애기

보통 모바일에서 가로스크롤이 보이지않아도 스와이프 제스처로 좌우 화면이동이 가능하다.

가로 스크롤을 안보이도록 하기위해 아래의 코드를 추가로 작성한다.

.box {
  overflow-x: auto;
  white-space: nowrap;
  
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.box::-webkit-scrollbar {
  display: none;
}