[CSS] Scroll Snap 쫀득쫀득한 스크롤

Scroll Snap 은 스크롤을 하고 난 후에 내부 컨테이너가 프레임에 맞게 자동으로 위치를 잡아줍니다.

 

HTML 코드

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

 

CSS: 좌우 스크롤

1

2

3

4

5

좌우로 스크롤 해보세요

 

.container {
    display: flex;
    width: 150px;
    height: 150px;
    overflow: auto;
    
    /* 좌우 스크롤 설정 */
    flex-flow: row nowrap;
    scroll-snap-type: x mandatory;
}
 
.container > div {
    width: 140px;
    height: 140px;
    flex: none;
    scroll-snap-align: center;
}

 

CSS: 상하 스크롤

1

2

3

4

5

상하로 스크롤 해보세요

 

.container {
    display: flex;
    width: 150px;
    height: 150px;
    overflow: auto;
    
    /* 상하 스크롤 설정 */
    flex-flow: column nowrap;
    scroll-snap-type: x mandatory;
}
 
.container > div {
    width: 140px;
    height: 140px;
    flex: none;
    scroll-snap-align: center;
}

 

Proximity

1

2

3

4

5

특정 범위를 넘어서면 스크롤 스냅을 하지 않습니다.

 

scroll-snap-type: x proximity;

 

Align

1

2

3

4

5

시작점을 기준으로 스크롤 스냅이 됩니다.

 

scroll-snap-align: start;

 

 

1

2

3

4

5

끝점을 기준으로 스크롤 스냅이 됩니다.

 

scroll-snap-align: end;