모든 브라우저 환경에서 스크롤바가 항상 보이는 진짜 방법 (IOS Safari 에서도)

우선 모든 브라우저 환경에서 스크롤바가 항상 보이기 힘든 이유는 IOS의 Safari, 즉 아이폰 전용 브라우저인 사파리 때문이다. 과거에는 크로스 브라우징의 문제아라고 하면 누구나 IE(인터넷 익스플로러)를 떠올렸을 텐데, 과거 버전이 계속해서 사용 중이라는 문제점만 빼면, 지금은 계속된 버전업을 통해 오히려 준수한 편이다.

떠오르는 차세대 다크호스는 바로 사파리(Safari) 브라우저다. 워낙 구식이고 ‘도대체 왜 이게 IOS의 메인 브라우저지?’ 라는 생각이 들 정도로 쓰레기 같은데, 업데이트도 본인들만의 방향성이 있는 건지 그냥 빠가사린지는 몰라도 점점 퇴보하는 느낌이다. 다른 모든 브라우저에선 적용되고, 심지어 크로스 브라우징 하면 가장 먼저 생각났던 인터넷 익스플로러의 예전 버전에서조차 작동하는 기능들도 작동하지 않는다. 그리고 가장 최악인 이유는, 앞서 말한 대로 이 쓰레기 같은 브라우저가 지구상에서 안드로이드 다음으로 가장 많이 쓰이는 아이폰 IOS의 메인 브라우저라는 점이다(진짜 개빡친다, 많이 쓰지만 않았어도 이딴 브라우저는 관심도 안 줄 텐데).

모든 환경에서 항상 스크롤바가 보이는 코드 만들기

개꿀몬(GKKmon) 사이트의 홈 화면이나 페이지 에서 볼 수 있는 ‘가로 방향으로 스크롤 되는 페이지 아이템 메뉴‘ 는 모든 브라우저 환경에서 테스트한, 크로스 브라우징이 끝난 오브젝트다. 직접 만들기 전엔 ‘고작 모든 브라우저에서 스크롤바를 항상 보이게’ 하는 게 이렇게 힘들 줄은 상상조차 하지 못했다. 그 이유는 앞서 말한 대로 사파리 때문인데, 정말 온갖 정보들을 다 뒤집어엎고, 위키를 털어보고, 이것저것 적용해보고, 응용해서 바꿔보고 했지만, 아이폰 IOS의 메인 브라우저 사파리는, 온전한 기능을 유지하면서 스크롤바가 항상 보이게 하는 게 불가능했다.

하지만 개꿀몬(GKKmon) 성격상 이런 찝찝한 부분을 포기할 수는 없어서, 조금 독특하지만 IOS에서도 사용 가능한 코드들을 활용해, 아이폰에서도 스크롤바가 있다는 걸 사용자에게 인식시킬 수 있는 대응책을 개발했다. 아이폰에서만 다른 방법으로 보여지고(하지만 스크롤바가 있음을 사용자가 인지할 수 있고), 그 외에는 정상적으로 스크롤바가 보이게 할 수 있는 방법을 소개한다.

우선 overflow:scroll 은 어떤 상황에서든 스크롤을 표시한다는거고, overflow:hidden 은 어떤 상황에서든 스크롤을 숨기는 속성이다. overflow-xoverflow-y로 가로스크롤과 세로스크롤을 따로 지정할수도 있다.

.item{
overflow-x:scroll;
overflow-y:hidden
}

이렇게 하면 가로 스크롤은 항상 보이고, 세로 스크롤은 항상 숨긴다는 뜻이다. 보통 이것만 먹여줘도 데스크탑에서 보이는 모든 브라우저(Chrome,IE,Firefox,Opera 등)에서는 스크롤바를 항상 표시할 수가 있다.

문제는 데스크탑에서 화면만 모바일 사이즈로 작게 해 확인한 화면과는 다르게, 실제로 모바일에서 볼 때는 overflow:hidden 속성이 있든 말든, 지들 맘대로 개무시하고 스크롤바를 항상 숨긴다. 때문에 ::-webkit-scrollbar{-webkit-appearance: none;} 속성을 사용해 기본 스크롤바를 숨기는 스타일을 넣어주고, 새로운 스크롤바를 만들어 적용해야만 모바일 화면에서도 항상 스크롤바를 볼 수 있다.

예시에선 세로 스크롤바는 숨기고 가로 스크롤바만 항상 보이는 HTM 파일을 만들고, iframe을 통해 원하는 위치로 불러오도록 하겠다.

<div class="item">
콘텐츠
</div>

<style type="text/css">
::-webkit-scrollbar{-webkit-appearance: none;}
  /* 기본 스크롤바를 안보이게 함 */
::-webkit-scrollbar-track-piece{background-color:#e7e7e7}
  /* 양 끝 화살표와 몸통 바를 제외한 길 */
::-webkit-scrollbar:horizontal{height:18px;}
  /* 가로 스크롤바의 크기, 세로는 horizontal을 vertical로 바꾸면 된다 */
::-webkit-scrollbar-thumb{background-color:#a8a8a8;border-radius:10px;border:2px solid #eeeeee;}
  /* 실제로 움직이는 몸통 바 */
::-webkit-scrollbar-button{width:16px;background-color:#a8a8a8;}
  /* 양 끝 화살표 부분 */
::-webkit-scrollbar-button:start:decrement:horizontal{
  /* 가로 스크롤의 왼쪽 화살표 부분 */
  width:16px;height:16px;background:#cacaca;
  background-image:url(/wp-content/custom/img/larrow.png);
  /* 화살표는 이미지를 정해줘야 한다 */
  background-repeat:no-repeat;background-position:center center;}
::-webkit-scrollbar-button:end:increment:horizontal{
  /* 가로 스크롤의 오른쪽 화살표부분 */
  width:16px;height:16px;background:#cacaca;
  background-image:url(/wp-content/custom/img/rarrow.png);
  background-repeat:no-repeat;background-position:center center;}}
</style>

라는 파일을 HTM 문서로 만들고, iframe 으로 불러오면, 삼성 인터넷이나 크롬 등 사실상 아이폰을 제외한 모든 브라우저에서 스크롤바가 항상 보이게 된다. iframe 으로 불러오는 이유는, embed 로 불러올 시 오브젝트가 아니라 미디어로 판단하기 때문에, 파이어폭스(Firefox) 같은 브라우저에서 차단 후 이 embed 를 표시하겠냐는 문구가 떠 사용자들의 접근성을 해치기 때문이다.

아이폰에서도 보이게 하기 위해선 iframe 을 한번 감싸줘야 한다. 거지 같은 사파리에선 iframe 으로 스크롤바를 생성 시, 자연스럽게 터치 드래그로 움직이지 않고 뻑뻑하게 움직일 뿐 더러, 드롭다운 메뉴라던지 화면 좌표를 바꿨다 돌아오는 기능을 쓰게 되면 먹통이 되는 버그가 있고, 이 버그를 막기 위해선 iframe의 바깥 요소에 overflow:auto;-webkit-overflow-scrolling:touch; 를 줘야 하기 때문이다.

고로 iframe은 이런 식으로 불러와야 한다.

<div style="height:100px; width:100%; overflow:auto; -webkit-overflow-scrolling:touch;">

<iframe src="item.htm" class="item-iframe"
style="width:100%;height:90px;"
width="100%" height="90px"
frameborder="0" scrolling="yes">
</iframe>

</div>

다른 부분은 자잘한 버그들을 없애고 확실한 크로스 브라우징을 위해 적은 것들이고, 중요한 건 iframe다른 요소로 한번 감싸고, 감싸고 있는 요소overflow:auto-webkit-overflow-scrolling:touch를 부여하는 것이다.

여기까지 하면 끝날꺼 같지? 아이폰의 사파리를 만만하게 보지 마라. 기껏 드래그 버그가 있어서 저렇게 수정해 줬더니, 이번엔 -webkit-overflow-scrolling:touch를 사용하면 위에서 만들었던 스크롤이 강제로 사라지는 문제가 있다. 때문에 개꿀몬(GKKmon)이 이것저것 수동 노가다를 통해 이 거지 같은 사파리에서도 먹히는 몇가지를 발견했는데, 그걸 통해서

<style type="text/css">
  @media only screen and (max-device-width:35.5em) {
  /* 모바일에서만 보이게 하기 위함 */
.item::-webkit-scrollbar{-webkit-appearance:none;}
  /* 사파리 버전으로 다시 없애고 */
.item::-webkit-scrollbar:horizontal{height:16px;}
  /* 사파리 버전으로 크기 정하고 */
.item::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 9px rgba(0,0,0,0.3);}
  /* 이건 몸통 바에 그림자를 주는 데코레이션 */
.item::-webkit-scrollbar:horizontal{padding-left:50px;width:100%;background-color:#e7e7e7;
background-image:url(/wp-content/custom/img/rarrow50.png);
  /* 사파리 용으로 자신이 원하는 만큼의 공백이 있는 화살표 이미지를 만들어야 한다, 개꿀몬(GKKmon)은 가로 50픽셀 맨 끝에 화살표가 있는 이미지를 만듦 */
background-repeat:repeat-x;
  /* 배경 화살표를 가로로 반복 */
background-position:center;}}
  /* 배경 화살표를 세로 중앙에 위치 */
</style>

이렇게 IOS 사파리에선 스크롤 바와 흡사한 배경에, 50픽셀 간격으로 오른쪽 화살표 표시를 해서, 이 오브젝트는 스크롤 할 수 있다는 표시를 할 수 있다.

완성된 코드

완전 깔끔하고 100% 만족스럽지는 않지만, 모든 사용자에게 스크롤이 가능한 오브젝트라는 사실을 직관적으로 표현할 수 있는 방법이다. 완성된 코드는

<div class="item">
콘텐츠
</div>

<style type="text/css">
::-webkit-scrollbar{-webkit-appearance: none;}
  /* 기본 스크롤바를 안 보이게 함 */
::-webkit-scrollbar-track-piece{background-color:#e7e7e7}
  /* 양 끝 화살표와 몸통 바를 제외한 길 */
::-webkit-scrollbar:horizontal{height:18px;}
  /* 가로 스크롤바의 크기, 세로는 horizontal을 vertical로 바꾸면 된다 */
::-webkit-scrollbar-thumb{background-color:#a8a8a8;border-radius:10px;border:2px solid #eeeeee;}
  /* 실제로 움직이는 몸통 바 */
::-webkit-scrollbar-button{width:16px;background-color:#a8a8a8;}
  /* 양 끝 화살표부분 */
::-webkit-scrollbar-button:start:decrement:horizontal{
  /* 가로 스크롤의 왼쪽 화살표부분 */
  width:16px;height:16px;background:#cacaca;
  background-image:url(/wp-content/custom/img/larrow.png);
  /* 화살표는 이미지를 정해줘야 한다 */
  background-repeat:no-repeat;background-position:center center;}
::-webkit-scrollbar-button:end:increment:horizontal{
  /* 가로 스크롤의 오른쪽 화살표부분 */
  width:16px;height:16px;background:#cacaca;
  background-image:url(/wp-content/custom/img/rarrow.png);
  background-repeat:no-repeat;background-position:center center;}}
</style>

<style type="text/css">
  @media only screen and (max-device-width:35.5em) {
  /* 모바일에서만 보이게 하기 위함 */
.item::-webkit-scrollbar{-webkit-appearance:none;}
  /* 사파리 버전으로 다시 없애고 */
.item::-webkit-scrollbar:horizontal{height:16px;}
  /* 사파리 버전으로 크기 정하고 */
.item::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 9px rgba(0,0,0,0.3);}
  /* 이건 몸통 바에 그림자를 주는 데코레이션 */
.item::-webkit-scrollbar:horizontal{padding-left:50px;width:100%;background-color:#e7e7e7;
background-image:url(/wp-content/custom/img/rarrow50.png);
  /* 사파리 용으로 자신이 원하는 만큼의 공백이 있는 화살표 이미지를 만들어야 한다, 개꿀몬(GKKmon)은 가로 50픽셀 맨 끝에 화살표가 있는 이미지를 만듦 */
background-repeat:repeat-x;
  /* 배경 화살표를 가로로 반복 */
background-position:center;}}
  /* 배경 화살표를 세로 중앙에 위치 */
</style>

이걸 htm 파일로 저장시킨 뒤 웹에 업로드하고,

<div style="height:100px; width:100%; overflow:auto; -webkit-overflow-scrolling:touch;">

<iframe src="올린 htm 파일의 URL" class="item-iframe"
style="width:100%;height:90px;"
width="100%" height="90px"
frameborder="0" scrolling="yes">
</iframe>

</div>

URL 부분만 바꿔서 이걸 원하는 위치에 삽입하면 된다.