overflow 속성에 의해 제공되는 스크롤바의 존재를 제어하는 기능과는 별도로 작성자에게 스크롤바 거터(gutter)의 존재에 대한 제어를 한다.
유저 에이전트(user agent)가 클래식 스크롤바를 표시하기 위해 예약할 수 있는 내부 테두리 가장자리와 외부 여백 가장자리 사이의 공간을 스크롤바 거터(gutter)라 한다. 오버레이(overlay) 스크롤바는 영향을 받지 않는다.
auto | stable && both-edges?
클래식 스크롤바는 overflow 속성 값이 scroll이면 오버플로우와 상관없이 스크롤바 여백을 만들어 공간을 차지한다. auto이면 컨테이너가 오버플로우될 때 스크롤바 여백을 만들어 공간을 차지한다. 오버레이(overlay) 스크롤바는 공간을 차지하지 않는다.
컨테이너의 인라인(inline) 시작 가장자리 또는 인라인 끝 가장자리 중 하나에 스크롤 막대 여백이 있는 경우 반대쪽 가장자리에도 다른 스크롤 막대 여백이 생긴다.
컨테이너가 실제로 오버플로우(overflow)되는 여부와 상관없이 overflow 속성이 hidden, scroll, auto일 때 클래식 스크롤바에 스크롤 여백을 만든다. 오버레이(overlay) 스크롤바는 공간을 차지하지 않는다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
클래식 스크롤바는 overflow 속성 값이 scroll이면 오버플로우와 상관없이 스크롤바 여백을 만들어 공간을 차지한다. auto이면 컨테이너가 오버플로우될 때 스크롤바 여백을 만들어 공간을 차지한다. 오버레이(overlay) 스크롤바는 공간을 차지하지 않는다.
컨테이너의 인라인(inline) 시작 가장자리 또는 인라인 끝 가장자리 중 하나에 스크롤 막대 여백이 있는 경우 반대쪽 가장자리에도 다른 스크롤 막대 여백이 생긴다.
결과창의 크기를 줄여 일부러 스크롤바를 표시하면 콘텐츠의 움직임이 발생하지 않고 반대쪽에도 동일한 스크롤바 거터(gutter)가 존재한다.
컨테이너가 실제로 오버플로우(overflow)되는 여부와 상관없이 overflow 속성이 hidden, scroll, auto일 때 클래식 스크롤바에 스크롤 여백을 만든다. 오버레이(overlay) 스크롤바는 공간을 차지하지 않는다.
결과창의 크기를 줄여 일부러 스크롤바를 표시하면 콘텐츠의 움직임이 발생하지 않는다. 반대로 스크롤바 거터(gutter)를 생성하지 않고 오버플로우시 스크롤바를 표시하면 콘텐츠의 공간 조정을 위한 움직임이 발생한다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Overflow Module Level 3 | 초안 작업 | Last review date: 2022-10-20 |
