[CSS] scroll-snap 과 scroll-behavior

 

 

스크롤을 어떻게하는게 좋을까 고민하던 찰나 저 친구들을 알게 됐다! 

 

🍒scroll-snap

부모에게 scroll-snap-type : 축 타입; 를 주고,

자식에게 scroll-snap-align : 기준점; 을 주면 된다.

 

예시)

.container {
	scroll-snap-type: y proximity; /* y축으로 스크롤, proximity(근처에 왔을 때만 스냅) */
    		/* mandatory 하면 아주 조금만 움직여도 자동스크롤이 됨 */
}

.item {
	scroll-snap-align: start; /* 자식의 시작부분을 맞춤 */
}

 

 

🍒scroll-behavior

scroll-behavior: smooth; 를 주면 스크롤이 부드럽게 슥슥 움직이게 된다.

 

 

 

!!참고!!

www.w3.org/TR/2019/CR-css-scroll-snap-1-20190319/

 

www.w3schools.com/cssref/pr_scroll-behavior.asp

CSS Scroll Snap Module Level 1