[CSS] scroll-*

 

 

유연한 스크롤을 만들어주는 CSS속성 scroll-*

 

1. scroll-* 사용법

컨텐츠 영역과 컨텐츠를 감싸는 부모 요소를 만든다.

<div class="scroll-container">
    <div class="scroll-page">1</div>
    <div class="scroll-page">2</div>
    <div class="scroll-page">3</div>
    <div class="scroll-page">4</div>
</div>

 

 

 

 

See the Pen scroll-* by gaae (@gaae) on CodePen.

 

2. scroll-behavior 속성

scroll-behavior :   auto   |   smooth   |   initial   |   inherit

문서이동시 스크롤 효과를 준다.  

컨텐츠 감싸는 부모요소    ex) scroll-container

 

· auto : 직선점프 효과. 기본값

· smooth  : 부드러운 c롤 효과

· initial  : 초기 기본값 설정

· inherit : 상위요소로 부터 상속

 

 

 

 

3. scroll-snap 유형 속성

scroll-snap-type : none | [scroll-snap-axis] | [scroll-snap-strictness]

속성 scroll-snap-type은 x축과 y축 모두에 설정된다.

컨텐츠 감싸는 부모요소    ex) scroll-container

 

· scroll-snap-axis :   x  |  y  |  block  |  inline  |  both

어느 축으로 스크롤 스냅을 발생시킬지 결정한다.

 

· x : 스크롤 스냅 효과가 x축에 설정

· y : 스크롤 스냅  효과가 y축에 설정

· block :  스크롤 스냅  효과가 블록 방향으로 설정

· inline :  스크롤 스냅  효과가 인라인으로 설정

· both : 두 스크롤 스냅 스냅  효과는 x축 및 y축 모두에서 설정

 

 

· scroll-snap-strictness :  none  |  mandatory  |  proximity

 스크롤 정도에 따른 스크롤 스냅의 발생 여부를 결정한다.

 

· none :  스크롤 스냅 효과 없음. 기본값

· mandatory : 반드시 스크롤 스냅 효과 발생

· proximity :  스크롤 스냅 효과를 발생시키지만 엄격하지 않는다.

                    스냅 지점 사이에는 스냅 효과가 없는 영역이 있다.

· initial 

· inherit

 

 

 

 

3. scroll-snap 정렬 속성

scroll-snap-align :  none | start | end | center | block inline | initial | inherit

스크롤을 중지할 때 요소에 초점이 맞춰지는 위치를 지정

자식요소인 컨텐츠에 적용     ex) scroll-page

 

· none : 스크롤 스냅 효과 없음. 기본값

· start : x축과 y축의 요소가 시작될 때 스크롤 스냅을 시작

· end : x축 및 y축의 요소 끝에서 스크롤 스냅을 종료

· center : x축 및 y축의 요소 중심에서 중앙 스크롤 스냅

· block inline : 두 가지 값 구문 첫 번째 값은 블록 방향으로 스냅,

                        두 번째 값은 인라인 방향으로 스냅

· initial 

· inherit

 

 

 

4. scroll-snap  stop 속성

scroll-snap-stop :  normal  |  always  |  initial  |  inherit;

트랙패드나 터치 스크린에서 빠르게 스와이프할 때 속성 scroll-snap-stop은 요소를 지나 스크롤할지 아니면 중지하고 다음 요소에 맞춰야 할지를 지정

자식요소인 컨텐츠에 적용     ex) scroll-page

 

· normal : 터치패드 또는 터치스크린으로 빠르게 스와이프한 후

                 스크롤 속도가 느려지고 여러 요소를 통과. 기본값

· always :  항상 터치패드 또는 터치스크린으로 빠르게 스와이프한 후

                 스크롤이 멈추고 다음 요소가 초점에 스냅

· initial 

· inherit

 

 

 

 

5. scroll-margin/padding 

하위 요소에 scroll-snap-align속성을 설정하고 scroll-snap-type상위 요소에 속성을 설정해야 한다.

 

· scroll- * - * -start :   정방향  스크롤에만 마진 적용, 역방향시 적용 안됨 

· scroll-  * - *  -end :   정방향시 적용 안됨, 역방향 스크롤에만 마진적용

 

· scroll- * -block :    start /end의 약식속성,  블록방향(세로)의 스크롤시 적용

· scroll- * - inline :   start /end의 약식속성,  인라인방향(가로)의 스크롤시 적용

 

· scroll-margin- * :    자식요소인 컨텐츠에 적용     ex) scroll-page

· scroll-padding- * :     컨텐츠 감싸는 부모요소    ex) scroll-container

 

 

· scroll-margin |  scroll-margin-top  |  scroll-margin-bottom  | 

  scroll-margin-left  |  scroll-margin-right

 

· scroll-margin-block |  scroll-margin-block-start  |  scroll-margin-block-end 

· scroll-margin-inline |  scroll-margin-inline-start  |  scroll-margin-inline-end 

 

· scroll-padding |  scroll-padding-top  |  scroll-padding-bottom  |  

  scroll-padding-left  |  scroll-padding-right

 

· scroll-padding-block |  scroll-padding-block-start  |  scroll-padding-block-end 

· scroll-padding-inline  |  scroll-padding-inline-start  |  scroll-padding-inline-end 

 

 

 

 

 

참고:

https://www.w3schools.com/cssref/css_pr_scroll-snap-type.php

CSS scroll-snap-type property

 

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

scroll-snap-type - CSS: Cascading Style Sheets | MDN