원하는 위치에 정지하기

가로방향으로 스크롤 (scroll-snap-type:x)

x를 값으로 입력하면 가로방향으로 스크롤할때 빠르게 지나가거나 멈추게 할수 있습니다.

캐너셀 이미지등에 사용할 수 있으며 모바일용 화면구성에도 적합합니다.

요소의 양옆 플렉스 박스를 사용합니다. 

 

.container {

overflow:auto;

scroll-snap-type:x;

display:flex;

}

 

.area {

scroll-snap-align:start;

height:100vh;

width:50vw;

flex:none;

}

 

캐러셀: 이미지,문장 등 콘텐츠를 좌우로 슬라이드해서 보여주는 방식을 의미합니다.

---

세로 및 가로 정방형으로 스크롤 (scroll-snap-type : both)

both를 값에 입력하면 가로와 세로 모두 이동하며 스크롤의 움직임을 제어할수 있습니다. 

타일형 레이아웃 등 여러가지 요소로 구성된 웹사이트에 사용하기 좋습니다. 

레이아웃을 구성할때 CSS 그리드를 사용합니다. 

 

.container {

overflow:auto;

scroll-snap-type:both;

display:grid;

 

스크롤 하는 위치 지정 (scroll-snap-type)

scroll-snap-type속성으로 스크롤 하는 방향에 따라 어느정도의 수준으로 위치를 조정할것인가도 설정할수 있습니다. 

 

항상 스크롤 스냅이 동작하도록 설정(mandatory)

mandatory를 추가하면 현재 표시되는 영역이나 다음 영역등 어느 한 부분이 표시됩니다. 

 

.container {

overflow:auto;

scroll-snap-type : y mandatory;

height:100vh;

}

 

.area {

scroll-snap-align: start;

height : 100vh;

}

 

중간지점에 있으면 그곳에서 정지 ( proximity : 가까움 )

proximity를 추가하면 경계선 근처로 움직였을때 화면이 스크롤 되고 그렇지 않으면 중간지점에서 멈춥니다.

mandatory (의무적인)는 순간적으로 빠르게 움직이는 느낌이 강한 느낌이라면 Proximity는 이보다는 부드럽게 움직이는 느낌입니다.

 

.container {

overflow : auto;

scroll-snap-type : y proximity;

height : 100hv;

}

 

.area {

scroll-snap-align : start;

height : 100vh;

}

 

영역종료지점 (end)

end를 입력하면 영역이 끝나는 지점에서 스크롤이 멈춥니다. 표시하는 요소가 세로로 나열되었다면 하단이, 가로로 나열되었다면 우측이 기준선입니다. 

 

.container{

overflow:auto;

scroll-snap-type : y mandatory:

height:100vh;

}

 

.area {

scroll-snap-align : end;

height: 70vh;

}

 

영역중앙지점 

center를 입력하면 중앙에서 스크롤이 멈춥니다.