여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - ScrollSnap
CSS – ScrollSnap
4개월전 작성
4개월전 수정

Scroll Snap은 마우스 스크롤을 다 해서 보고있는 섹션의 글을 다 봤을 때 그 다음 섹션으로 넘어가게 하고싶을 때가 있다.

이 때 사용하는게 Scroll Snap으로 Scroll Snap에 대해 알아보자.

ScrollSnap

<section> 요소에서 스크롤 스냅하는 위치를 지정하는 속성.

overflow

상위 요소에 사용되며, 스크롤 하도록 하는 속성.

overflow / overflow-y / overflow-x 이렇게 속성을 사용할 수 있으며 속성 값은 scroll이나 auto로 사용하면 된다.

scroll-snap-type

스냅 포지션을 지정하는 속성.

코드
scroll-snap-type: none;
:
상위 요소Snap Container
에 사용되며, 스냅하지 않는다.
scroll-snap-type: x;
:
상위 요소Snap Container
에 사용되며, X축 기준으로 스냅 포지션 지정한다.
scroll-snap-type: y;
:
상위 요소Snap Container
에 사용되며, Y축 기준으로 스냅 포지션 지정한다.
scroll-snap-type: block;
:
상위 요소Snap Container
에 사용되며, block축 기준으로 스냅 포지션 지정한다.
scroll-snap-type: inline;
:
상위 요소Snap Container
에 사용되며, inline축 기준으로 스냅 포지션 지정한다.
scroll-snap-type: both;
:
상위 요소Snap Container
에 사용되며, 두 축의 위치를 독립적으로 스냅 포지션 지정한다. 잠재적으로 각 축의 다른 요소에 스냅이 가능하다.
scroll-snap-type: mandatory;
:
상위 요소Snap Container
에 사용되며, 항상 스냅한다.
scroll-snap-type: proximity;
:
상위 요소Snap Container
에 사용되며, 스냅 포지션이 지정된경우 스냅 포지션 위치로 스냅하고 그렇지 않은경우 브라우져 기본 스타일을 따라간다.

scroll-padding

상위 요소Snap Container
에 사용되며, scroll-padding: 50px; 이렇게 사용시 스냅 포지션을 50px 만큼 땡긴다. 정확하게는 뷰포트의 여백이 적용된다.

scroll-snap-align

코드
scroll-snap-align: none;
:
하위 요소Snap Area
에 사용되며, 정렬하지 않는다.
scroll-snap-align: start;
:
하위 요소Snap Area
에 사용되며,
요소Snap Area
의 상단에 정렬한다.
scroll-snap-align: end;
:
하위 요소Snap Area
에 사용되며,
요소Snap Area
의 하단에 정렬한다.
scroll-snap-align: center;
:
하위 요소Snap Area
에 사용되며,
요소Snap Area
의 가운데에 정렬한다.

scroll-margin

하위 요소Snap Area
에 사용되며, 스냅할 때
요소Snap Area
의 여백을 지정한다.

기본

기본 예시
첫번째 섹션
두번째 섹션
세번째 섹션
 

CSS
.scroller {
height: 20rem;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.scroller section {
scroll-snap-align: start;
min-height: 100%;
padding: 10px;
}
HTML
첫번째 섹션
두번째 섹션
세번째 섹션

응용

기본 예시
강다니엘
Antidote

Please let me go (yeah, yeah)
긴 어둠 속 날 꺼내줘
Just let me go (just let me go)
I’m looking for the antidote, oh oh
Yeah, yeah
어두운 밤에 나 홀로
한계치를 넘어선 독
끝이 없는 어둠 and that’s real talk
몸 부림 치는 것도
무의미해지는 곳
지독한 밤들을 어서 지워줘 antidote
I’m looking for the antidote (-dote)
이 밤을 끝내줘 oh oh
I’m begging for the antidote (antidote)
깨끗이 지워줘 oh oh (깨끗이 지워줘)

I hope

수많은 일에도
멈출 수 없는 건
변하지 않는 너 yeah
시간이 지나도
놓칠 수 없는 것
Will never let you down
또 지나치고 마는 순간 속에 (속에)
자라난 의심의 끝에서
겁 많아진 나를 달래면서
같은 시간 틈 사이에 고백 (고백)
한없이 마음을 쏟았던
그 곳은 언제나 함께 하길
Stay with me
You are the one I need
So you just take my hand
I hope you smile
그대로 있어줘 손 내밀면 닿을 곳에
그대로 멈춰줘 지금 우리 시간속에
생각지도 못한 작은 소란 속에서
우리 볼 수 있다면 yeah
아무 생각없이 네 옆에 기대어
내가 나로 되어가

Waves

Sa, Il, Ee, Saam
아마 네 말 아님 말투
나를 흔들리게 하는 gum chew
필요할 것 같아 너는 fun (fun)
왜 그런지 알 거야 나도
일단 일단 다가와 봐 와 봐
너무 멀지 않아
우리 둘의 방향
궁금해 우리들의 direction
나와 같은 마음이면 action
누군지도 모르겠어 난
자꾸 나를 쳐다보는 게
Maybe it’s the way you made me fall
Come on, pronto
더 취해야겠어 일단 okay, I pour up
네가 오고 나서부터 여긴 이미 포화
일부러 흘리는 게 아니고 넌 넘쳐흘러 보여
(Drippin’) like water, water
Yeah, I wanna get to know ya
Hey, little mami
파도 속에 wave
I’m drowning
맡겨 너의 way
We’re surfing
빠져나오지도 못하게
소나기 (splash)
소나기, 소나기

 

CSS
.scroller {
height: 20rem;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.header {
position: sticky;
top: 0;
height: 2rem;
scroll-padding: 2rem;
}

.blacknwhite {
background-color: #000;
color: #FFF;
}

.scroller section {
scroll-snap-align: start;
min-height: 100%;
padding: 10px;
scroll-margin-top: 2rem;
}

.scroller section:nth-child(even) {
background-color: #DFD6D2;
}
HTML
<div class="scroller">
<div class="header blacknwhite">강다니엘</div>
<section>
Antidote

Please let me go (yeah, yeah)
긴 어둠 속 날 꺼내줘
Just let me go (just let me go)
I'm looking for the antidote, oh oh
Yeah, yeah
어두운 밤에 나 홀로
한계치를 넘어선 독
끝이 없는 어둠 and that's real talk
몸 부림 치는 것도
무의미해지는 곳
지독한 밤들을 어서 지워줘 antidote
I'm looking for the antidote (-dote)
이 밤을 끝내줘 oh oh
I'm begging for the antidote (antidote)
깨끗이 지워줘 oh oh (깨끗이 지워줘)
</section>
<section>
I hope

수많은 일에도
멈출 수 없는 건
변하지 않는 너 yeah
시간이 지나도
놓칠 수 없는 것
Will never let you down
또 지나치고 마는 순간 속에 (속에)
자라난 의심의 끝에서
겁 많아진 나를 달래면서
같은 시간 틈 사이에 고백 (고백)
한없이 마음을 쏟았던
그 곳은 언제나 함께 하길
Stay with me
You are the one I need
So you just take my hand
I hope you smile
그대로 있어줘 손 내밀면 닿을 곳에
그대로 멈춰줘 지금 우리 시간속에
생각지도 못한 작은 소란 속에서
우리 볼 수 있다면 yeah
아무 생각없이 네 옆에 기대어
내가 나로 되어가
</section>
<section>
Waves

Sa, Il, Ee, Saam
아마 네 말 아님 말투
나를 흔들리게 하는 gum chew
필요할 것 같아 너는 fun (fun)
왜 그런지 알 거야 나도
일단 일단 다가와 봐 와 봐
너무 멀지 않아
우리 둘의 방향
궁금해 우리들의 direction
나와 같은 마음이면 action
누군지도 모르겠어 난
자꾸 나를 쳐다보는 게
Maybe it's the way you made me fall
Come on, pronto
더 취해야겠어 일단 okay, I pour up
네가 오고 나서부터 여긴 이미 포화
일부러 흘리는 게 아니고 넌 넘쳐흘러 보여
(Drippin') like water, water
Yeah, I wanna get to know ya
Hey, little mami
파도 속에 wave
I'm drowning
맡겨 너의 way
We're surfing
빠져나오지도 못하게
소나기 (splash)
소나기, 소나기
</section>
</div>
참고
Mingg`s Diary
밍구
공부 목적 블로그