최근 쿠키 클리커 같은 게임을 만들어보고 있었는데 모바일에서 어떻게 구현을 해야할지 고민중에 있었다.
그러다 떠오르게 된 것이 오른쪽으로 넘기는 풀스크린 스크롤을 만들어보자는 생각이 들었다.
화면에 꽉 채우고 스크롤까지 시키는것은 쉽게 가능했었다.
하지만 화면을 넘기다 중간에 멈추면 그 상태로 반반인 화면이 보여지게 되었다.
이것을 방지하려면 어떻게 해야할지 고민을 하다가 css로 해결이 가능하다는 것을 알게 되었다.
우선 해당 화면들을 담고있는 main에
main {
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
스크롤을 만들어준 후 scroll-snap-type을 줘야 한다.
x 축으로 스냅을 적용하고, mandatory는 사용자 스크롤 중단 시 가장 가까운 snap point로 이동하도록 강제한다.
그 이후 안에 담긴 애들한테
scroll-snap-align: start;
flex-shrink: 0;
로 고정시켜주면 된다.
각 화면이 스크롤 뷰의 시작 지점에서 정렬되도록 한다.
처음에는 풀스크린 같은 라이브러리를 사용해야 하나 고민이 있었는데 알고나니 쉽고 간단하게 가능하다는 것을 알게 되었다.
두고두고 써먹을 수 있을것 같다.
'이것저것' 카테고리의 다른 글
| padStart와 padEnd (JS) (0) | 2024.05.18 |
|---|---|
| Nominatim API (0) | 2024.05.09 |
| 눈 내리는 효과 (React) (0) | 2024.04.22 |
| Mixed Content (Next.js) (0) | 2024.04.19 |
| js의 console (0) | 2024.04.14 |