CSS – ScrollSnap

카테고리: 공부 » 프론트엔드 » 

2년전 작성

2년전 수정

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-margin

기본

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

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

첫번째 섹션


두번째 섹션


세번째 섹션

응용

.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;
}

<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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기