css 속성 scroll-snap 간단 요약 정리

scroll-snap

• 페이지 스크롤 시 사용자에게 보여주고 싶은 영역에서 멈추게 해주는 기능
• 큰 이미지를 사용하는 풀스크린 레이아웃이나 갤러리용 상이트에 적용 하기 좋음.

scroll-snap 시 꼭 필요한 css 속성

• height:100vh;
• 감싸고 있는 영역의 높이와 요소의 높이를 100vh로 맞춰줘야한다.

scroll-snap-type 속성 값 종류

scroll-snap-type :	value 의미
x	가로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다.
y	세로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다.
both	상하좌우 스크롤시 빠르게 지나가거나 멈추게 할 수 있다.

 

scroll-snap-type 위치 지정

속성 종류	의미
mandatory	현재 표시되는 영역이나 다음 영역 등 어느 한 부분이 표시된다.
proximity	경계선 근처로 움직였을 때 화면이 스크롤 되고 그렇지 않으면 중간 지점에서 멈춘다.

 

scroll-snap-align 멈춤 기준 설정하기

scroll-snap-align	의미
start	다음 요소의 (맨 위쪽) 시작 지점에서 멈춘다.
end	다음 요소의 (맨 아래쪽) 끝나는 지점에서 멈춘다.
center	다음 요소의 정 가운데 지점점에서 멈춘다.

 

반응형

 

scroll snap 예시

//Sass
.container{
	scroll-snap-type: y proximity;
	
	.item{
		scroll-snap-align: start;	
	}
}

item 1

위와 같은 item1 에서 ~ 아래의 item 2로 넘어갈 때

item 2

위쪽의 1item의 여백이 살짝 있다면 알아서 2의 start 라인에 맞춰주는 역할을 한다.

-> 화면상에서 다음 item의 영역이 상당 수를 차지하면 다음 item으로 넘어가게끔 유도한 것이다.

 

 

css 제작에 도움이 되셨다면 공감 한 번 부탁드려요~