스크롤바가 보이지 않는 스크롤 박스 만들기

웹 레이아웃을 만들 때 폼 요소, 또는 스크롤바는 디자인을 예쁘게 만드는 게 쉽지 않은 요소입니다.

스크롤바 같은 경우 예쁘게 만들 수는 있지만, 약간의 호환성 문제가 있습니다.

크롬과 신형 엣지 브라우저는 벤더 프리픽스(공급사 접두어)를 사용하면 스크롤바를 원하는 데로 꾸밀 수 있습니다.

.sidebar::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: #aaa;
}
.sidebar::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

웹킷(-webkit) 벤더 프리픽스를 적용해 구현한 이 스크롤바는 왼쪽처럼 좁은 스크롤바 모양과 트랙 색상이 적용되어 보이게 됩니다. 그러나 파이어폭스에서는 전혀 적용되지 않습니다.

그럴 바에는 아얘 스크롤바를 안 보이게 하면 더 깔끔하고 뭔가 에지 있게 보일 수 있게 때문에 스크롤바를 처리하는 방법 중의 하나로 사용할 수 있습니다.

스크롤바를 감추는 방법은 세련되고 깔끔한 화면 레이아웃을 연출할 수 있지만, 반대로 스크롤바가 보이지 않기 때문에 스크롤바로 스크롤해야 볼 수 있는 감추어진 영역에 컨텐츠가 있는걸 이용자가 몰라서 아얘 접근을 하지 못하게 될 수도 있는 단점이 있습니다. 스크롤 바를 감추는 레이아웃은 이럴 가능성이 낮아서 이용자에게 혼동을 줄 여지가 적은 경우에만 한정적으로 사용해야 합니다.

스크롤바를 감추는 방법은 CSS를 이용해 2가지 방법으로 구현할 수 있습니다.

적용 방식만 다를 뿐 동일하게 동작합니다.

1. 패딩(Padding)으로 감추기

구현 방법은 간단합니다.

부모 요소 영역을 벗어나는 하위 요소들은 보이지 않게 감추고, 부모 요소 크기로 만든 스크롤바가 있는 하위 요소의 스크롤바를 오른쪽 바깥으로 17px 만큼 밀어내서 보이지 않도록 하는 것입니다.

부모 요소의 핵심 속성은 "overflow: hidden;" 이고 하위 요소의 핵심 속성은 padding-right: 17px; box-sizing: content-box;"입니다. "content-box"는 사실 필요는 없습니다. "box-sizing" 속성의 기본 속성 값이 "content-box" 이기 때문에 "padding-right: 17px;"만 있어도 됩니다.

.wrapper{
  width: 300px;
  height: 100%;
  overflow: hidden; /* .scroll 의 넘치는 내용을 감춤 */
}

.scroll{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 17px; /* 스크롤바 너비 */
  box-sizing: content-box;
}

2. 포지션 속성으로 감추기

1번의 패딩을 이용하는 방법과 유사합니다.

스크롤바가 있는 하위 요소의 위치 속성이 "absolute" 이기 때문에 하위 요소가 상위 요소인 래퍼(.wrapper) 안에 한정되도록 "position: relative;" 속성을 추가합니다.

스크롤바가 있는 하위 요소는 절대 위치 속성으로 상하좌우 위치 속성을 0으로 해서 상위 요소 테두리에 요소를 붙이고, 오른쪽 방향은 -17px(스크롤바 너비)를 지정해서 스크롤바가 상위 요소 오른쪽 바깥으로 벗어나서 보이지 않도록 합니다.

.wrapper{
  width: 300px;
  height: 100%;
  overflow: hidden;
  position: relative; /* 필수 */
}

.scroll{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -17px; /* 스크롤바 너비 */
  overflow-y: scroll;
}