css를 사용하며 (풀스크린..?)

최근 쿠키 클리커 같은 게임을 만들어보고 있었는데 모바일에서 어떻게 구현을 해야할지 고민중에 있었다.

그러다 떠오르게 된 것이 오른쪽으로 넘기는 풀스크린 스크롤을 만들어보자는 생각이 들었다.

 

화면에 꽉 채우고 스크롤까지 시키는것은 쉽게 가능했었다.

하지만 화면을 넘기다 중간에 멈추면 그 상태로 반반인 화면이 보여지게 되었다.

이것을 방지하려면 어떻게 해야할지 고민을 하다가 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;

로 고정시켜주면 된다.

각 화면이 스크롤 뷰의 시작 지점에서 정렬되도록 한다.

 

 

처음에는 풀스크린 같은 라이브러리를 사용해야 하나 고민이 있었는데 알고나니 쉽고 간단하게 가능하다는 것을 알게 되었다.

두고두고 써먹을 수 있을것 같다.