-
[css] scroll-snap코딩일지/TIL 2022. 7. 1. 00:43
scroll-snap
<html> <head> <title>scroll-snap demo</title> </head> <body> <slidegroup> <slide>1</slide> <slide>2</slide> <slide>3</slide> </slidegroup> </body> </html>slidegroup { position: absolute; top :0; bottom : 0; right :0; left : 0; display : flex; flex-direction: column; flex-flow: column nowrap; scroll-snap-type : y mandatory; scroll-behavior: smooth; overflow: auto; } slide { display : inline-block; width :100%; height : 100%; scroll-snap-align : start; flex: none; }css properties
parent :
scroll-snap-type- x, y, block, inline, both, none
- (optional) mandatory, proximity
type 은 방향을 지정해줌. snap이 걸리는 scroll 방향.
option 들은 자동 스크롤의 특성을 정해줌.
mandatory는 조금이라도 움직이면 그 방향으로 한칸 snap 이동.
proximity는 지금 scroll 위치 기준 가까운 칸으로 snap 이동.children :
scroll-snap-align- none, start, end, center
snap으로 인한 자동 스크롤이 멈출 때 이 node의 어디에서 멈출건지 선택.
References
[1] scroll-snap - mozilla
[2] implementation of css scroll-snap event - developpaper.com
[3] How can I get CSS scroll snap to work with JS scroll event listener? - stack overflow'코딩일지 > TIL' 카테고리의 다른 글
[js] static variables in javascript (0) 2022.07.01 [html,js] 외부 package import 하는 방법 (0) 2022.07.01 [js] how to remove a dom (0) 2022.06.30 [html] Select tag (0) 2022.06.30 [html] script 태그는 어디에 위치해야 할까 (0) 2022.06.30