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 제작에 도움이 되셨다면 공감 한 번 부탁드려요~

 

반응형

댓글(0)

Designed by JB FACTORY