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

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

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

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

.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;
}