[CSS] 순수 CSS로 섹션별 스크롤 기능 만들기

scroll-snap-type 를 사용해서 스크롤 시 다음 섹션의 상단이 화면 위에 착! 붙는 액션을 구현해본다.

 

MDN 문서

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

scroll-snap-type - CSS: Cascading Style Sheets | MDN

 

 

포인트

- 부모인 콘테이너의 높이는 100vh고, 자식들(=각 섹션 div들)의 높이는 부모의 100%이다.

 

See the Pen Untitled by dayoung0510 (@dayoung0510) on CodePen.

 

 

// 부모 div
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;


// 자식 div
height: 100%;
scroll-snap-align: start;