[임시] FastBoot Offcanvas 상하 스크롤 만들기

Posted by Readiz
2014.04.06 00:21 반응형 티스토리/FastBoot


본 포스팅은 FastBoot v1.5.1과 관련이 있습니다



Offcanvas 상하 스크롤 시키기(100% Solution 아님)



  사실 지금 소개하려는 방법은 처음 Offcanvas 제작단계부터 알고 있던 해결책입니다만, 문제가 하나 있어서 일부러 알려드리지 않고 있었습니다. 그런데 Offcanvas의 스크롤에 관해 물어보시는 분들이 많아서 문제가 약간 있는 해결책이라도 일단 알려드리려고 합니다.


  문제는 바로 구버전의 안드로이드에서 스크롤이 안된다는 것인데요(제가 가지고 있는 진저브레드 기기는 확실히 안됩니다). 확인해본 바로는 젤리빈 이상에서는 문제없이 스크롤 되고, 사실 이제 왠만한 스마트폰은 진저브레드를 잘 안쓴다는 판단하에 일단 공개합니다. iOS에서는 현재 제가 가지고 있는 사과기기가 없어서 확인은 안됩니다만 어차피 Safari도 Webkit기반이니 똑같지 않을까 싶습니다. 혹시라도 이 글을 보시는 분들중에 확인가능하신 분은 동작여부 좀 알려주시면 감사하겠습니다.


  코드는 간단합니다. style.css 하단에 넣으시면 돼요..


	
#lnav>ul {
  height:100%;
  overflow-y:auto;
} 
	


  4줄이면 끝난다는게 참 간단하죠. 문제는 overflow-y 속성인데, 일단 데스크탑 브라우저나 최신버전의 모바일 OS에서는 확실히 됩니다. 구버전까지 지원하려면 Javascript를 이용하여 스크롤하는 방법을 이용해야 하는데, 며칠 웹을 둘러본 바로는 가벼운 자바스크립트 스크롤러가 드물고, 몇몇 맘에 드는 것은 오작동을 해서.. 참 고민이 큰 문제입니다.


  어쨌든 저렇게 수정하고 나면 아래 화면처럼 스마트폰에서도 스크롤이 됩니다. (제 스마트폰은 갤3입니다) 이렇게 해서라도 처음에 그냥 배포했어야 했나봐요.. 괜히 진저에서도 잘 돌아가게 한다고 붙들고 있다가 이도저도 아니게 되어버렸네요.




   


  

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 고생이많으십니다 ㅎㅎ
    잘봣어요 ^^
    다음뷰 구독하고 갑니다 ㅎㅎ
  2. 저도 사과 기기가 아직 없어서`` 도움 못드리겠네요
    쓰고있는 베가레이서 안드로이드에서는 잘 작동 됩니다
    • 네 안드는 잘 되는 듯 하네요.. ㅎㅎ
  3. 이 부분이 어쩌면 다른 부분 문제일 수도 있습니다. 정확한 확인은 안해봤지만...
    오프 캔버스로 사용하시는 것이 position:fixed 를 이용한다면 안드로이드와 iOS의 구버전에서는 작동하지 않습니다. 아마 대부분의 jQuery 플러그인이 fixed를 사용할것 같은데, 굳이 화면에서 밀어내지 않고 position:absolute 로 화면 위로 덮어버리는 방식을 사용한다면 해결될 문제겠지요. 이때 스크롤을 적용해보시는게 수순일껍니다. 구형 기기의 지원을 위해서는 fixed 를 포기할 수 밖에 없지요.
    • 네 그런데 fixed요소 문제가 아니라 아예 overflow:scroll 옵션에 대한 스크롤바 생성이 안되는것 같습니다. 안드로이드/iOS 구버전에서는..
      제가 예전에 Webapp개발할 때도 이 문제 때문에 대체할만한 스크롤바 생성하는 script들을 알아보았는데, 그때도 그렇고 시간이 지난 지금도 그다지 마음에 드는 것이 썩 없네요. 그런데 최근들어 iOS는 물론이고 안드로이드도 거의 아이스크림샌드위치 이상의 최신버전으로 넘어오는 듯 해서 전처럼 크게 걱정할 문제는 아닌듯 하여 고민 중에 있습니다.

티스토리 툴바