Css scroll snap 😶‍🌫️

마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다.

이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!!

 

부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고

자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다.

이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요

 

scroll-snap 을 지정한 예제

scroll-snap을 지정하지 않은 예제

 

위의 예제는 scroll-snap을 지정한 예제와 지정하지 않은 예제입니다. 

지정하지 않은 예제는 탐색을 위해 더 많은 스크롤 동작을 수행해야 하지만 

scroll-snap 을 효율적으로 이용하면 더 적은 동작으로 원하는 것들을 보여줄 수 있습니다. 

더 나은 ux를 제공해 줄 수 있을것 같습니다.

 

부모 요소 지정 속성

scroll-snap-type : [none | x | y | block | inline | both] [mandatory | proximity]? ;

scroll-padding : [우리 padding 주듯이]

scroll-snap-type은 scroll을 어디로 할 것이냐를 지정합니다. 

저는 y축으로의 스크롤에 효과를 주기 위해 y를 넣어주었습니다.

mandatory | proximity 는 필수로 지정할 것이냐 | 브라우저의 속성을 따를 것이냐 입니다.

기본 속성은 mandatory 입니다.

 

scroll-padding은 보이는 화면에서 padding을 주는 것입니다.

 

 

자식 요소 지정 속성

scroll-snap-align : [none | start | center | end]

scroll-margin : [우리 margin 주듯이]

scroll-snap-align은 기준점을 의미합니다. 

start를 하면 시작점

center를 하면 중간

end를 하면 끝점을 기준점으로 지정합니다. 

 

scroll-margin은 개별 요소에서 margin을 지정할 수 있습니다.

 

 

 

See the Pen scroll-snap by 정우병 (@woobottle) on CodePen.

 

 

이전 글 중 scroll을 smooth 하게 하는 속성도 있어서 같이 첨부합니다!

2022.03.22 - [markup/css] - scroll-behavior 🌱

scroll-behavior 🌱

 

출처: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

CSS Scroll Snap - CSS: Cascading Style Sheets | MDN