iscroll로 overflow scroll 효과 내기

티스토리 뷰

WEB2.0/웹표준

iscroll로 overflow scroll 효과 내기

나를찾는아이 2012. 2. 14. 13:00

728x90

기존에 웹 콘텐츠 기획을 하시던 분들이

모바일 웹 콘텐츠 기획을 할때 종종 간과하는 것중의 하나가

내부 콘텐츠 스크롤링 기능입니다.

정해진 크기의 영역에 콘텐츠를 영역 크기 이상으로 넣고 스크롤바를 달아

해당 영역 내에서 스크롤링을 통해 콘텐츠를 탐색할수 있도록 하는 이 기능은

정해진 영역에 많은 정보를 보여주려는 요구에 맞춰

탭메뉴와 함께 주변에서도 굉장히 많이 사용되고 있습니다.

이 기능은 CSS의 속성중 overflow라는 속성을 통해서 쉽게 적용이 가능합니다.


#content {height:200px;overflow:auto;}

하지만 모바일 웹에서는 overflow 속성의 사용이 제한이 되어있습니다.

더 정확히 말하자면 내부 콘텐츠 스크롤링에 제한이 있습니다.

iOS5에서는 모바일용 사파리가 내부 콘텐츠 스크롤이 가능하도록 업데이트가 되었지만

iOS4와 안드로이드용 브라우저에서는 내부 스크롤 기능이 적용되지 않습니다.

그래서 모바일 웹 초기 부터 스크롤링이 가능한 내부 콘텐츠는 지양해야했습니다.

iOS5에서 이 속성을 지원하고,

많은 기획자분들의 욕심에 내부스크롤을 사용할 경우가 많아졌습니다.

이때 여러분들에게 도움이 되는 iscroll 입니다.

구버전인 iscroll 말고 향상된 iscroll4를 사용하세요.

적용방법은 간단합니다.

1. iscroll을 적용할수 있는 구조로 마크업합니다.

<div id="wrapper">

    <ul>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

    </ul>

</div>

참고하실 점은 반드시 스크롤되는 콘텐츠를 감싸는 wrapper 역할을 하는 div를 만들어서 콘텐츠를 감싸게 하고

그 wrapper 역할을 하는 div에 id값을 넣고 적용하시기 바랍니다.

2. iscroll.js 를 head에 넣고

<script src="iscroll.js"></script>

3. css 속성을 적용합니다.

#wrapper {height:200px;overflow:auto;}

4. 마지막으로 iscroll을 활성화 합니다.

<script type="text/javascript">

var myScroll = new iScroll('wrapper');

</script>

아래의 코드는 샘플 코드입니다.


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<meta charset="utf-8" />

<title>스크롤</title>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

#wrapper {height:200px;overflow:auto;}

</style>

<script src="iscroll.js"></script>

</head>

<body>

<div id="wrapper">

    <ul>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

        <li>내용</li>

    </ul>

</div>



<script type="text/javascript">

var myScroll = new iScroll('wrapper');

</script>



</body>

</html>

데모보기

728x90

저작자표시

'WEB2.0 > 웹표준' 카테고리의 다른 글

모바일 사파리에서는 option의 disabled가 적용되지 않는다 (0)	2012.04.06
-9999px을 대체하는 새로운 image replacement 기법 (0)	2012.03.27
트위터스러운 웹사이트 간단하게 만들어보기 (0)	2012.01.27
IE6이 표준모드로 작동하는데 도움이 되는 IE7.js 라이브러리 (0)	2011.12.29
조건부 주석(Conditional comments) 사용하기 (0)	2011.12.19

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

나를 찾는 아이

티스토리 뷰

iscroll로 overflow scroll 효과 내기

'WEB2.0 > 웹표준' 카테고리의 다른 글

티스토리툴바