overflow auto는 틀렸다?! 브라우저 스크롤바 잘 숨기는 법
07 Nov, 2020
overflow: auto 는 틀렸다?! 브라우저 스크롤바 잘 숨기는 법
웹 페이지 개발을 하면서 컨텐츠를 보여줄 때 가늠이 되지 않는다면, 컨테이너 요소에 overflow: auto 를 설정하여 컨텐츠가 길어질 경우 스크롤을 생기게 하여 유연하게 대응이 가능하다.
그런데 사용 중인 OS 또는 브라우저 종류에 따라 이 스크롤 바가 화면에 표시되는 방식에 있어서 차이가 존재하기 때문에 간혹 골칫거리로 작용한다.
스크롤 바의 width가 다 상이하거나 스크롤 바의 디자인 적인 요소를 제외하더라도 한가지 치명적인 문제가 존재한다.
맥과 아이폰의 경우 스크롤 바가 화면상의 공간을 차지하지 않기 때문에 실제 콘텐츠가 렌더링 되는 영역에 영향을 주지 않는다. 그러나 윈도우의 경우 스크롤 바가 화면 상의 실제 공간을 차지하므로 콘텐츠가 렌더링 되는 영역 또한 스크롤 바의 영역만큼 줄어들게 된다.
예를들면, 컨테이너의 width가 500px 인 상황에서 스크롤 바가 10px 만큼의 width를 가질 경우, 실제 콘텐츠가 나타나는 영역은 490px 이게 된다. 이로 인해 레이아웃이 조금씩 뒤틀리는 이슈가 발생 할 수 있다. 반대로 width가 500px에 좌우 padding 값이 10px 이하일 경우 콘텐츠와 스크롤 바가 겹치는 경우가 발생하기도 한다.
이러한 이슈가 발생 했을 때 OS 및 브라우저에 상관없이 일관된 사용자 경험을 주는 방법이 몇가지 있다.
1. 스크롤 바를 화면에서 숨기기
이 방법을 사용하기 위해서는 두 개의 컨테이너 요소와 내용을 담당하는 요소 1개가 필요하다.
<html>
<head>
<style>
.element, .outer-container {
width: 200px;
height: 200px;
}
.outer-container {
position: relative;
overflow: hidden;
border: 5px solid purple;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer vehicula quam nibh, eu tristique tellus dignissim
quis. Integer condimentum ultrices elit ut mattis.
Praesent rhoncus tortor metus, nec pellentesque enim
mattis nec. Nulla vitae turpis ut dui consectetur
pellentesque quis vel est. Curabitur rutrum, mauris ut
mollis lobortis, sem est congue lectus, ut sodales nunc
leo a libero. Cras quis sapien in mi fringilla tempus
condimentum quis velit. Aliquam id aliquam arcu. Morbi
tristique aliquam rutrum. Duis tincidunt, orci suscipit
cursus molestie, purus nisi pharetra dui, tempor
dignissim felis turpis in mi. Vivamus ullamcorper arcu
sit amet mauris egestas egestas. Vestibulum turpis neque,
condimentum a tincidunt quis, molestie vel justo. Sed
molestie nunc dapibus arcu feugiat, ut sollicitudin metus
sagittis. Aliquam a volutpat sem. Quisque id magna
ultrices, lobortis dui eget, pretium libero. Curabitur
aliquam in ante eu ultricies.
Quisque vitae tincidunt purus. Vivamus feugiat bibendum
erat, nec interdum urna porta sed. Nunc lobortis neque
orci, ut suscipit nisl congue feugiat. Vivamus feugiat
tellus quis cursus sollicitudin. Curabitur dolor massa,
dictum ut ipsum in, porttitor pellentesque ante. Aenean
egestas cursus tempor. Maecenas semper tortor sit amet
egestas cursus. Mauris porttitor quis nisi ut tincidunt.
Curabitur adipiscing eleifend nibh. Praesent mauris leo,
consequat vitae orci eget, vestibulum bibendum nisi.
Aliquam tempus diam ut tortor cursus, eget sodales augue
adipiscing. Nulla at dignissim libero.
</div>
</div>
</div>
</body>
</html>먼저 안쪽 컨테이너에는 overflow-y: scroll 을 설정하여 스크롤 가능한 콘텐츠로 만들고, 바깥쪽 컨테이너와 내용물을 담당하는 요소의 크기를 동일하게 설정한다. 이후 바깥쪽 컨테이너에 overflow: hidden 을 설정하면 바깥으로 빠져나간 스크롤바는 화면에 감춰지게 된다.
단, 이렇게 스크롤바를 감춰버리면 사용자에게 스크롤 가능한 콘텐츠라는 정보를 제공할 수 없기 때문에 사용자 경험은 나빠질 수 있다. 스크롤 바를 숨긴 대신, 사용자에게 스크롤 가능한 영역임을 나타내는 시각적 힌트를 제공해야 한다.
2. 순수 CSS로만 구성
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}3. perfect-scrollbar 라이브러리 활용하기
perfect-scrollbar 라이브러리를 활용하여 모든 브라우저 및 OS에서 동일한 형태로 보여지는 스크롤 바를 구현할 수 있다. 또한 이 라이브러리를 사용하여 구현한 스크롤 바는 화면 상에서 자신만의 공간을 차지하지 않기 때문에 레이아웃이 뒤틀릴 일도 없다.
단, 해당 라이브러리는 유지보수가 안 이뤄진지 꽤 오랜 시간이 지났고 프로덕션에 사용하기엔 불안한 점이 꽤 있는 듯 하다.
