마우스 혹은 손가락으로 스크롤을 할때 화면을 자석마냥 찰싹 찰싹 상단/중단/말단 에 붙일 수 있습니다.
이게 말로 하면 어려운데 아래 동작을 보면 이해하기 쉬울겁니다!!
부모요소에 scroll-snap-type, scroll-padding을 지정할 수 있고
자식요소에 scroll-snap-align, scroll-margin을 지정할 수 있습니다.
이렇게 부모 요소, 자식 요소에 관련된 속성을 따로 부여하여 제어했었던 것은 css flex에서도 했었던 것 같네요
위의 예제는 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 🌱
css 속성중에 scroll-behavior 속성이 있습니다. 위의 이미지는 scroll-behavior을 적용한것 아래의 이미지는 적용하지 않은 것입니다. scroll-behavior 속성을 적용하면 navigation이나 cssom scroll API에 의..
dkrnfls.tistory.com
출처: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
CSS Scroll Snap - CSS: Cascading Style Sheets | MDN
CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container's scrollport may end at after a scrolling operation has completed.
developer.mozilla.org
'markup > css' 카테고리의 다른 글
| Css visibility: hidden, display: none, opacticy: 0️⃣ (0) | 2022.04.05 |
|---|---|
| 미디어 쿼리 🌱 (0) | 2022.03.29 |
| scroll-behavior 🌱 (0) | 2022.03.22 |
| Css progress bar 만들기 (0) | 2022.03.19 |
| Css margin과 padding의 차이 (0) | 2022.03.19 |