Rev. 2.73

iOS(아이폰/팟/패드) 그리고 안드로이드 기기에서 화면을 던지는 제스처로 화면을 스크롤링(이동)하는 인터페이스는 이제 우리에게 익숙합니다. 물론 전체 웹페이지에도 마찬가지로 적용되지만, 페이지 내 일부 요소가 overflow: auto로 설정되어 요소가 가진 내용이 출력 범위를 초과해서 스크롤바가 나타난 경우는 예외였습니다. 손가락을 움직인 만큼만 스크롤되기 때문에 내용이 길면 짜증이 나곤 했죠.

iOS 5부터 지원되는 webkit-overflow-scrolling 속성을 이용하면 위와 같은 상황에서도 던지는 제스처를 사용할 수 있습니다. 최근에 알게 되었다는 부끄러움을 뒤로 한 체, 여기저기에 마구마구 이 속성을 쑤셔 넣기 시작했는데 안타깝게도 다음과 같은 작은 문제들을 발견했습니다. 분명히 나중에 수정해 줄 것으로 믿고 있지만, 너무 섹시한 기능이라 뿌리칠 수가 없어 당장 대처할 방법을 강구해 보았습니다.

scroll.PNG

처음으로 맞닥뜨린 문제는 스크롤바의 기본 모양을 변경할 수 있는 -webkit-scrollbar-* 속성과 혼용하면 화면이 깨져 보이는 것이었습니다. 터치 후 제스처와 동시에 나타나는 얇고 예쁘장한 스크롤바와 그것을 흉내 내려고 어설프게 커스터마이즈한 스크롤바가 동시에 보이기 때문입니다. 버그일지 몰라도 현재는 혼용하지 않는 것이 좋아 보입니다.

여기에 예로 든 화면은 맘대로 뜯어고쳐 운영중인 JSBin입니다. 모든 섹션이 상대적으로 긴 컨텐츠를 다루기 때문에 webkit-overflow-scrolling 속성을 적용하기에 적합하다고 판단했습니다.

update.PNG

다음으로, 터치 후 던지는 제스처로 페이지가 스크롤 되는 동안 안 보이던 영역의 컨텐츠가 갱신되지 않는 채로 화면이 이동하는 문제가 있습니다. 특히, <ul> 요소가 overflow: auto로 설정된 경우 두드러지게 나타났습니다. 이 문제를 해결하려고 별의별 짓(무작위 속성 조합?)을 시도하다가 우연히 해결법을 발견했습니다. 그것은 <section> 요소로 감싼 다음 <ul> 요소에는 position: relative를 조합(?)한 것이었어요;

수정 전:

<style>
.scrollable {
  position: absolute; top: 0; left: 0; bottom: 0; width: 200px;
  border-right: 1px solid #bbb; background: #eaeaea;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
</style>
.
.
<ul class="scrollable">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  .
  .
</ul>

수정 후:

<style>
.scrollable {
  position: absolute; top: 0; left: 0; bottom: 0; width: 200px;
  border-right: 1px solid #bbb; background: #eaeaea;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.scrollable ul { position: relative; }
</style>
.
.
<section class="scrollable">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    .
    .
  </ul>
</section>

... 이상입니다. 뻘쭘;

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar