목차
scrollbar-gutter 예제 - 스크롤바 자리 위한 공간 지정 scrollbar-gutter 정의 scrollbar-gutter 구문 홈페이지 떨림 흔들림 방지 방법 3가지
scrollbar-gutter 예제 - 스크롤바 자리 위한 공간 지정
<style>
.box {
width: 200px;
height: 150px;
overflow-y: auto;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.auto { scrollbar-gutter: auto; }
.stable { scrollbar-gutter: stable; }
.stable_both_ediges { scrollbar-gutter: stable both-edges; }
</style>
<div class="box auto">
홈짱닷컴 Homzzang.com 홈페이지 제작관리 배우기<BR>
HTML CSS JavaScript jQuery PHP SQL 등<BR>
</div>
<div class="box stable">
홈짱닷컴 Homzzang.com 홈페이지 제작관리 배우기<BR>
HTML CSS JavaScript jQuery PHP SQL 등<BR>
</div>
<div class="box stable_both_ediges">
홈짱닷컴 Homzzang.com 홈페이지 제작관리 배우기<BR>
HTML CSS JavaScript jQuery PHP SQL 등<BR>
</div>
결과보기
scrollbar-gutter 정의
콘텐츠 옆에 스크롤바를 위한 공간을 예약할지 여부와, 이 공간에 스크롤바가 없을 때 배경을 어떻게 처리할지 지정
1.
scrollbar-gutter:stable 사용하면 스크롤바가 필요할 때를 대비하여 항상 스크롤바의 너비만큼 공간을 유지함. 스크롤바가 없어도 해당 공간은 여백(gutter)으로 남아있게 되므로, 스크롤바가 나타나도 콘텐츠가 밀리지 않아 홈페이지 흔들림 증상 방지 가능..scrollbar-gutter:stable both-edges 사용하면 흔들림 방지하면서 콘텐츠를 중앙에 배치하는 경우에도 도움 됨.
2.
기본값: auto
적용대상: 스크롤링 되는 박스
상속여부: X
계된된값: 명시된 대로
애니유형: 불연속
3.
주요 최신 브라우저 모두 지원 .
4.
MDN scrollbar-gutter 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter
scrollbar-gutter 구문
selector { scrollbar-gutter : auto | stable | stable both-edges | inherit | initial | unset | revert | revert-layer; }
[매개변수]
auto
스크롤바 필요시에만 공간 확보. (기본값)
stable
항상 스크롤바 위한 공간 확보.
stable both-edges
stable 설정된 경우, 스크롤바가 나타나지 않아 남는 거터 공간을 반대쪽 가장자리(Edge)에도 추가.
레이아웃 이동 증상 발생 방지하면서 콘텐츠를 시각적으로 중앙에 배치 위한 목적임.
PS. 나머지 속성값은 전역속성값 임.
홈페이지 떨림 흔들림 방지 방법 3가지
[방법1] - scrollbar-gutter:stable 사용 (최선책)
HTML의 루트 요소(또는 스크롤바가 있는 컨테이너 또는 body)에 적용.
:root { scrollbar-gutter: stable; } /* 또는 body에 적용 */
또는,:root { scrollbar-gutter: stable both-edges; } /* 또는 body에 적용 */
[방법2] - overflow-y:scroll 사용 (차선책)
페이지 내용의 길이에 관계없이 항상 수직 스크롤바를 보이도록 강제하여 스크롤바의 유무로 인한 너비 변화를 원천적으로 방지
body { overflow-y: scroll; }
단점: 내용이 짧아도 항상 스크롤바가 보여서 시각적으로 안 깔끔함.
[방법3]
100vw (Viewport Width)는 스크롤바를 포함한 전체 뷰포트 너비를 의미하며, 100%는 부모 요소의 너비에서 스크롤바 너비를 제외한 영역을 의미합니다. 이 차이를 이용해 중앙 정렬된 콘텐츠의 레이아웃 이동을 방지할 수 있음.
html {
/* 스크롤바가 나타나면 100vw - 100% 만큼의 여백이 생겨
콘텐츠가 오른쪽으로 이동하는 것을 상쇄함. */
margin-left: calc(100vw - 100%);
margin-right: 0;
}
PS. 주의: 이 방법은 중앙 정렬된 레이아웃에서 주로 사용되며, 다른 레이아웃 방식에서는 예상치 못한 문제가 발생할 수 있음.
최신댓글