[CSS] 고정된 DIV 영역에 세로 스크롤바 생성하기

2022. 12. 19. 00:09

친효스킨2를 개발하면서 사이드바 영역에만 스크롤바를 만들어야하는 일이 생겼습니다. 기본적으로 요소들은 쌓이는 성질이 있고 세로 해상도보다 콘텐츠양이 더 넘치면 자동으로 스크롤바가 생기죠. 대표적으로 브라우저가 이런 성격을 가지고 있습니다. 세로로 내용이 긴 콘텐츠의 경우 세로 스크롤바가 자동으로 생성됩니다. 콘텐츠가 길수록 스크롤 양도 상당해집니다. 흔히 스크롤의 압박이라 불리우는것이 이 경우입니다.

허나 친효스킨2의 경우는 사이드바가 고정 형태입니다. 즉 display: flexd;가 적용되어 다른 영역의 콘텐츠와는 무관하게 늘 고정된 위치에 노출되어 있습니다. 그러니 사이드바 내부의 콘텐츠가 길면 일부가 짤리는 문제가 발생합니다. 그러니 사이드바 영역에만 독립적으로 세로 스크롤바를 만들 필요가 있었습니다. 그럼 세로 스크롤에 대한 CSS 옵션을 살펴보겠습니다.

예제

See the Pen CSS3 overflow option by rgy0409 (@rgy0409) on CodePen.

먼저 위의 예제를 살펴보도록 합니다. 텍스트는 모두 p태그로 감싸여있으며 p태그는 총 5개의 그룹으로 나뉘어 있습니다. CSS 항목을 살펴보시면 p태그별 overflow 옵션이 다양하게 사용되고 있음을 알 수 있습니다. 각 옵션별 설명은 다음과 같습니다.

overflow

스크롤과 관련된 CSS 스타일 옵션은 overflow입니다. over 즉! 해당 요소 영역의 넘치는 부분에 대한 flow 즉! 흐름을 제어한다는 그런 의미라고 생각하시면 됩니다.

overflow-x 또는 overflow-y

x 또는 y가 없는 경우는 x축, y축 모두를 동시에 제어하게 되며 각 축에 대해 따로 제어를 하기 위해서는 반드시 -x 또는 -y를 붙여 사용하면 됩니다. 이제부터는 overflow의 세부 옵션입니다.

overflow: visible;

기본값입니다. 모든 요소에는 overflow: visible; 속성이 들어있다고 생각하시면 됩니다. 넘치는 부분을 그대로 출력해 보여주는 형태입니다.

overflow: auto;

다음은 자주 사용되는 overflow: auto; 입니다. 이 옵션은 부모 요소의 세로 크기보다 자식 요소들의 세로 크기가 더 길 경우 자동으로 부모 요소에 세로 스크롤을 생성해주는 옵션입니다. 즉 부모 요소의 세로 크기보다 자식 요소의 세로 크기가 작다면 세로 스크롤은 사용할 필요가 없으니 스크롤바는 생성되지 않습니다. 말 그대로 자동입니다.

overflow: scroll;

이 옵션은 무조건 스크롤바를 생성합니다. 따라서 디자인적인 측면으로 봤을 때 스크롤바 때문에 지저분해 보일 수 있습니다. 아시다시피 스크롤바 디자인이 엄청 세련되지는 않거든요.

overflow: hidden;

넘치는 요소들을 모두 없애버립니다.

overflow: inherit;

부모의 overflow 속성을 따릅니다.

실전 돌입

이제 방법을 알았으니 스킨에 직접 써먹어 보겠습니다. 아래는 친효스킨2의 CSS에 마크업된 실제 코드입니다.

/* 사이드바 시작 */
#sidebarWrap .sidebar {
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: -180px;
    padding: 10px;
    height: 100%;
    border-radius: 0 20px 20px 0;
    transition: all .2s;
    box-shadow: 1px 0 5px 1px rgba(0, 0, 0, 0.5);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

position이 fixed로 고정된 상태입니다. 그러니 사이드바 내부의 콘텐츠가 쌓이면 넘치는 부분이 브라우저의 창에 떠밀려 보이지 않게 밀려납니다. 여기에 세로 스크롤이 가능하도록 overflow-y auto; 옵션을 넣었습니다. x축은 딱히 필요 없으니 y축에 대한 제어만 하면 되므로 overflow-y를 사용했고 스크롤바가 늘 표시되지 않는것이 좋으니 scroll 대신 auto를 사용했습니다.