아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 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
는 스크롤 동작시에만 스크롤바가 나타나며, 스크롤바가 공간을 차지하지 않습니다.
반면에 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 이슈를 겪게 되셨을 때, 작게나마 도움이 되었으면 좋겠습니다.
2개의 댓글
이준우 · 2024년 7월 29일 2:45 오후
좋은글 감사합니다!
qwe · 2024년 9월 19일 5:37 오후
24년 최신 글이라 몇 자 적어보면요.
1. 예제 상 max-width: 300px; 인데요. 고정 width 주는거랑 뭐가 다른지 모르겠네요.
2. margin-right: -20px; 이것도 결국 스크롤 바의 너비 만큼 고정 px 로 땡기는건데, 항상 20px 일리가 없잖아요? 이것에 대한 대책이 없음.
결론적으로 실사용은 불가능하다….. 2024년도면~~ 뭔가 획기적인게 있어야 하는거 아닌가~~~ 라는 생각이 듭니다.