아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 UI 위치가 변하는 이슈를 겪어본 적 있으신가요?

어떻게 보면 당연한 거 아닌가 싶기도 하지만, 꼼꼼한 디자이너님의 경우 위치가 변하지 않도록 수정해달라 요청이 오기도 하는데요.
기존에는 overflow: overlay라는 속성을 활용해 어느 정도 대응할 수 있었지만 overflow: overlay는 이제 삭제되어 사용할 수 없는 속성이 되어버렸습니다. (참고: https://caniuse.com/css-overflow-overlay)
그렇다면, 다른 대체할 만한 방법이 있을지 고민해 보며 scrollbar-gutter라는 CSS 속성을 소개하고 관련 대응 방법을 알아보겠습니다.

overlay scrollbar, classic scrollbar

scrollbar-gutter 속성을 설명하기 앞서, scrollbar-gutter 를 이해하려면 알아야 하는 개념인 overlay scrollbar 와 classic scrollbar에 대해 알아보겠습니다.

스크롤바에는 두 가지 종류가 있는데요, 바로 overlay scrollbar 와 classic scrollbar입니다.

overlay scrollbar

overlay scrollbar는 스크롤 동작시에만 스크롤바가 나타나며, 스크롤바가 공간을 차지하지 않습니다.

classic scrollbar

반면에 classic scrollbar는 스크롤을 동작하지 않아도 항상 모습을 유지하며, 스크롤바가 일부 공간을 차지하고 있습니다.

🔍 스크롤바 설정 방법

mac의 경우, 기본 설정값은 overlay scrollbar이며, 설정 > 일반 > 스크롤 막대 보기 설정을 통해 스크롤바 설정을 변경할 수 있습니다.

window의 경우, 기본적으로 classic scrollbar로 동작하며, 일부 브라우저에서 각 브라우저 설정에 따라 overlay scrollbar로 설정을 변경할 수 있습니다.

scrollbar-gutter

scrollbar-gutter 속성은 공간을 차지하지 않는 overlay scrollbar에선 어떠한 영향도 끼치지 않으며, 공간을 차지하는 classic scrollbar에서 스크롤바가 있을 경우, 또는 없을 경우에 스크롤바의 공간을 어떻게 차지할지를 결정하여 스크롤바의 공간으로 인한 원치 않는 레이아웃 변경을 방지하도록 하는 속성입니다.

scrollbar-gutter = auto | stable && both-edges?

scrollbar-gutter는 auto 또는 stable이라는 value를 가지며 stable일 경우,
both-edges라는 옵션을 붙일 수 있습니다.

❗️scrollbar-gutter 코드 예제는 classic scrollbar로 설정 변경 후 확인 부탁드립니다❗

See the Pen scrollbar-gutter 예제1 auto by WITBLOG (@witblog) on CodePen.

scrollbar-gutter: auto;

auto는 scrollbar-gutter의 기본 값으로, box 가 넘쳐 스크롤이 생긴 경우에 스크롤바 공간이 생성됩니다.
스크롤바의 공간으로 인해 스크롤바가 있을 경우와 없을 경우에 내부 콘텐츠 영역의 너비가 다름을 확인할 수 있습니다.

See the Pen scrollbar-gutter 예제2 stable by WITBLOG (@witblog) on CodePen.

scrollbar-gutter: stable;

stable는 스크롤바가 없을 경우에도 스크롤바 영역을 생성하여,
스크롤바 유무에 상관없이 내부 콘텐츠 너비가 동일한 값을 가질 수 있도록 합니다.

See the Pen scrollbar-gutter 예제3 stable both-edges by WITBLOG (@witblog) on CodePen.

scrollbar-gutter: stable both-edges;

both-edges는 stable과 함께 쓰이는 옵션으로,
스크롤바가 위치한 오른쪽뿐만 아니라 왼쪽에도 동일한 크기의 공간을 생성해 줌으로써,
좌우 정렬이 틀어져 보이지 않도록 도와줍니다.

🔍 scrollbar-gutter 활용시 고려사항

scrollbar-gutter 활용 시 고려해야 될 사항을 알아보겠습니다.

1. 지원범위

아쉽게도 scrollbar-gutter는 현재 safari 브라우저에선 지원이 안되고 있습니다.
그러니 scrollbar-gutter를 사용하고자 한다면, 브라우저별 대응을 충분히 고려한 후 사용해 주세요.

2. 여백 표현의 어색함

scrollbar-gutter로 인해 생긴 스크롤바 공간으로 인해 의도치 않은 여백이 발생하게 됩니다.

See the Pen scrollbar-gutter 예제4 고려사항 by WITBLOG (@witblog) on CodePen.

위의 예시처럼, 오른쪽 끝까지 꽉 차야 하는 list의 item이 scrollbar-gutter로 인한 공간으로 인해
마치 끊긴 것처럼 보여 어색한 것을 확인할 수 있습니다.
이처럼 scrollbar-gutter를 사용할 때는, scrollbar-gutter로 인한 공간이 생겨도,
디자인 가이드와 동일한 화면 구현이 가능할지를 고려해서 사용해야 합니다.

scrollbar-gutter는 지원 브라우저와 디자인 등 고려할게 많아 사용하기 까다롭게 느껴지는 속성이지만
스크롤바의 유무와 상관없이 동일한 콘텐츠의 너비를 가지게 함으로써
상황에 따라선 classic scrollbar를 보다 간단하게 대응하도록 도와주는 해결책이 될 수 있습니다.
미리 알아두셨다가 유용하게 사용하셨으면 좋겠습니다:)

음수 margin과 max-width를 활용한 classic scrollbar 대응

음수 margin과 max-width를 적절히 활용하면, 스크롤바의 유무와 상관없이 동일한 화면 UI를 표현할 수 있습니다.

See the Pen scrollbar-gutter 예제5-1 max-width by WITBLOG (@witblog) on CodePen.

See the Pen scrollbar-gutter 예제5-2 max-width by WITBLOG (@witblog) on CodePen.

위쪽 예제 코드는 아무 대응도 하지 않은 일반적인 예제로,
스크롤바로 인해 오른쪽 정렬된 문구의 위치가 달라짐을 확인할 수 있습니다.

아쪽 예제 코드는 음수 margin과 max-width를 활용한 예제로,
스크롤바의 유무와 상관없이 문구의 위치가 동일함을 확인할 수 있습니다.

.content {
  max-width: 300px;
  margin-right: -20px;
}

우선 음수 margin-right를 활용해 스크롤바로 인해 줄어든 영역을 당겨줍니다.
하지만 스크롤바가 없을 경우엔 음수 margin-right 속성으로 인해 영역이 넘치게 되는데요,
이때, 콘텐츠의 너비만큼 max-width 속성 사용하면 영역이 넘치는 것을 막을 수 있습니다.

마치며

mac os 환경에서 개발을 하다 보면, classic scrollbar는 간과하고 넘어가게 되는 경우가 있습니다.
이 글을 통해 classic scrollbar에 대해 한번 깊게 생각해 보는 시간을 가져보며
앞으로 classic scrollbar 이슈를 겪게 되셨을 때, 작게나마 도움이 되었으면 좋겠습니다.


0개의 댓글

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다