Snap-Scroll 구현

css로 간단하게 snap scroll을 구현할 수 있다.

html

<div class='container'>
  <section class='child'></section>
  <section class='child'></section>
  <section class='child'></section>
  ...
</div>

CSS

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

라인이 맞춰지지 않는 문제

inline-block div 안의 내용물의 사이즈가 크면 아래로 내려감.

https://stackoverflow.com/questions/8120466/missalignment-with-inline-block-other-elements-pushed-down

vertical-align: top 로 해결.

참조

https://css-tricks.com/practical-css-scroll-snapping/

김땡땡's blog

김땡땡