정의 및 사용 방법

scrollbar-gutter 속성을 사용하면, 스크롤바가 생기든 생기지 않든 스크롤바가 표시될 공간을 미리 확보할 수 있습니다.

이렇게 하면 해당 요소의 영역 변화로 인해 스크롤바가 갑자기 생기더라도, 미리 확보된 공간 덕분에 콘텐츠가 갑자기 밀리거나 흔들리는 등의 불필요한 시각적 변화를 방지할 수 있습니다.

클래식 스크롤바 환경에서만 적용

일부 브라우저에서는 스크롤바가 항상 공간을 차지하는 클래식 스크롤바(예: 크롬, 파이어폭스, 엣지 PC 버전) 방식이고,
일부는 콘텐츠 위에 겹쳐 표시되는 오버레이 스크롤바(예: macOS Safari, 대부분의 모바일 브라우저) 방식입니다.

scrollbar-gutter 속성은 클래식 스크롤바 환경에서만 적용됩니다.

적용 범위와 제한

이 속성은 요소 상자의 인라인 시작 가장자리나 인라인 끝 가장자리에 배치된 스크롤바 공간의 존재 여부에 영향을 줍니다.

  • 일반적으로 대부분 사용하는 가로쓰기 모드(writing-mode가 horizontal-tb인 경우)에서는 수직 스크롤바 영역에만 영향을 주고, 수평 스크롤바 영역에는 영향을 주지 않습니다.
  • 반대로 세로쓰기 모드(writing-mode가 horizontal-rl 또는 horizontal-lr인 경우)에서는 수평 스크롤바 영역에만 영향을 주고, 수직 스크롤바 영역에는 영향을 주지 않습니다.

이처럼 scrollbar-gutter 속성은 모든 스크롤바 영역에 영향을 주는 것은 아닙니다. 글쓰기 방향의 시작과 끝(가로쓰기 모드에서는 수직 스크롤바, 세로쓰기 모드에서는 수평 스코롤바)에 위치하는 스크롤바 영역에만 적용이 됩니다.

기본 예제

CSS 데모: scrollbar-gutter

형식 구문

CSS 
selector {
    scrollbar-gutter: auto | stable |  stable both-edges
}

구문

CSS 
/* 키워드 값 */
scrollbar-gutter: auto; /* 초깃값 */
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges; /* scrollbar-gutter: both-edges stable;와 동일함 */

/* 글로벌 값 */
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
scrollbar-gutter: revert-layer;
scrollbar-gutter: unset;

값

scrollbar-gutter 속성의 값
auto 초깃값임.
클래식 스크롤바에서는 overflow가 scroll일 때, 또는 auto이고 요소가 실제로 넘칠 때 스크롤바 공간(거터)이 생성됩니다.
stable 클래식 스크롤바에서는 overflow가 hidden, scroll,또는 auto일 때, 실제로 요소가 넘치지 않더라도 스크롤바 공간(거터)이 항상 존재합니다. 주의: 이 속성은 스크롤바 자체의 표시 여부를 변경하지 않고, 단지 스크롤바 공간(거터)의 존재 여부만 제어합니다.
both-edges 요소 상자의 인라인 시작 가장자리나 인라인 끝 가장자리에 스크롤바 공간이 생성될 경우, 반대쪽 가장자리에도 동일하게 스크롤바 공간(거터)을 생성해야 합니다. both-edges는 단독으로 사용할 수 없고, 반드시 stable과 띄어쓰기로 결합해서 써야 합니다. 이때 쓰는 순서는 상관없습니다.

형식 정의

scrollbar-gutter 속성의 형식 정의
초깃값 auto
적용 요소 scrolling boxes
상속 아니오
애니메이션 아니오

예제

scrollbar-gutter 속성의 값에 따른 예제를 살펴보겠습니다.

참고하세요!
아래 예제에서 실제 적용된 모습에 사용된 애니메이션은 스크롤바를 동적으로 구현하기 위한 것으로, 코드의 내용에는 포함시키지 않았습니다.

auto

초깃값입니다.
클래식 스크롤바에서는 overflow: scroll일 때, 또는 overflow: auto이고 요소가 실제로 넘칠 때 스크롤바 공간(거터)이 생성됩니다.

HTML 
<div class="container">
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been
    the industry's standard dummy text ever since the 1500s,
    when an unknown printer...
</div>
CSS 
.container {
    width: 250px;
    height: 200px;
    border: 5px solid #663399;
    background: rgba(255, 0, 200, .15);
    overflow: auto;
    scrollbar-gutter: auto; /* 초깃값으로 작성하지 않더라도 scrollbar-gutter: auto;가 적용됨 */
}
CSS 
.container {
    width: 250px;
    height: 200px;
    border: 5px solid #663399;
    background: rgba(255, 0, 200, .15);
    overflow: auto;
    scrollbar-gutter: auto; /* 초깃값으로 작성하지 않더라도 scrollbar-gutter: auto;가 적용됨 */
}

스크롤바의 여부에 따라 텍스트가 갑자기 밀리거나 흔들리는 시각적인 변화를 볼 수 있습니다. 이러한 현상은 요소가 실제로 넘칠 때 스크롤바 공간(거터)이 생성되기 때문입니다.

실제 적용된 모습

stable

클래식 스크롤바에서는 overflow가 hidden, scroll,또는 auto일 때, 실제로 요소가 넘치지 않더라도 스크롤바 공간(거터)이 항상 존재합니다. 주의: 이 속성은 스크롤바 자체의 표시 여부를 변경하지 않고, 단지 스크롤바 공간(거터)의 존재 여부만 제어합니다.

HTML 
<div class="container">
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been
    the industry's standard dummy text ever since the 1500s,
    when an unknown printer...
</div>
CSS 
.container {
    width: 250px;
    height: 200px;
    border: 5px solid #663399;
    background: rgba(255, 0, 200, .15);
    overflow: auto;
    scrollbar-gutter: stable;
}

해당 요소의 영역 변화로 인해 스크롤바가 갑자기 생기더라도, 미리 확보된 공간 덕분에 콘텐츠가 갑자기 밀리거나 흔들리는 등의 불필요한 시각적 변화를 방지할 수 있습니다.

실제 적용된 모습

stable both-edges

both-edges는 단독으로 사용할 수 없고, 반드시 stable과 띄어쓰기로 결합해서 써야 합니다. 이때 쓰는 순서는 상관없습니다.

HTML 
<div class="container">
    Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been
    the industry's standard dummy text ever since the 1500s,
    when an unknown printer...
</div>
CSS 
.container {
    width: 250px;
    height: 200px;
    border: 5px solid #663399;
    background: rgba(255, 0, 200, .15);
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

stable both-edges 값은 stable 갑과 거의 동일하게 구현되지만, 반대쪽 가장자리에도 동일하게 스크롤바 공간(거터)을 생성한다는 점에서 차이가 있습니다.

실제 적용된 모습

CSS 스크롤바(Scrollbars) 커스텀 스타일링

CSS 스크롤바(Scrollbars) 커스텀 스타일링을 참조하세요!

브라우저 호환성

scrollbar-gutter 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
scrollbar-gutter 94 94 97 18.2

명세서

scrollbar-gutter 속성의 명세서 사양
명세서 사양
scrollbar-gutter CSS Overflow Module Level 3
#scrollbar-gutter-property

같이 보기