본문 바로가기

반응형 티스토리/FastBoot

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


본 포스팅은 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입니다) 이렇게 해서라도 처음에 그냥 배포했어야 했나봐요.. 괜히 진저에서도 잘 돌아가게 한다고 붙들고 있다가 이도저도 아니게 되어버렸네요.