Translate

2013년 5월 29일 수요일

[iOS Safari] DIV에 Scroll animation(flick) 적용하기


javascript로 div에 스크롤을 적용시켰는데 iOS에서는 매끄럽게 움직이지만
안드로이드에서는 기종마다 퍼포먼스 차이가 심하게 났다.

대체 방안으로 CSS를 이용하여 스크롤을 넣었는데 div 태그에는 스크롤을 넣었을 때
안드로이드에서는 매끄럽게 움직였지만 iOS기종에서는 손가락을 떼는 순간
플리킹(flicking)효과가 나타나지 않았다.

iOS5 부터 적용된 CSS옵션이며 iOS4 에서는 플리킹효과가 작동하지 않는다.


해당 div에 다음의 속성을 넣으면 된다.
-webkit-overflow-scrolling: touch;


가로로만 스크롤이 들어가야 하는경우에 다음의 속성을 주게되면 세로 스크롤이 없어진다.
x 좌표만 움직이고 y좌표는 고정될 수 있도록..
height: 100%;
overflow-x: auto;
overflow-y: hidden;



대부분의 디바이스에서 작동이 되어야 하기 때문에 iOS4 에서도 테스트를 해봤다.
스크롤이 작동하지 않아서 한참을 찾았는데..
iOS4에서는 스크롤을 이용할 시 2 finger 방식으로 이동을 해야 한다고 한다. ㅡ.ㅡ



Not Flicking in safari (X)

<div style="height: 174px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; width: 100%;">
<div style="background-image: url(http://3.bp.blogspot.com/-nKD6oK5SID8/Ua6uy-aPttI/AAAAAAAAAGk/23CtLS8YkAg/s1600/1.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://3.bp.blogspot.com/-O4Xi9hdrIcw/Ua6uy_seaoI/AAAAAAAAAGE/sCaP-SHLxw8/s1600/2.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://1.bp.blogspot.com/-0zfHMabtxYQ/Ua6uyxnxk6I/AAAAAAAAAGI/kirnAovQ1Co/s1600/3.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://2.bp.blogspot.com/-ZovAMHtjqA0/Ua6uzWwzfJI/AAAAAAAAAGU/m0noOD96QcI/s1600/4.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://2.bp.blogspot.com/-F1BHj-lBbHo/Ua6uzfmMBsI/AAAAAAAAAGY/djcrrtcDz40/s1600/5.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://4.bp.blogspot.com/-DgyHwe7mLfU/Ua6uz5PidkI/AAAAAAAAAG4/8aGiQI4B7oY/s1600/6.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://2.bp.blogspot.com/--iSInI1JOyU/Ua6u0HOzF6I/AAAAAAAAAGo/o5nvF12XfHI/s1600/7.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://1.bp.blogspot.com/-kGCPpaEEx64/Ua6u0f-4eiI/AAAAAAAAAG0/ENgfS-CZOCs/s1600/8.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
</div>






Flicking in safari (O)

<div style="height: 174px;">
<div style="-webkit-overflow-scrolling: touch; font-size: 0; height: 100%; letter-spacing: 0; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; width: 100%;">
<div style="background-image: url(http://3.bp.blogspot.com/-nKD6oK5SID8/Ua6uy-aPttI/AAAAAAAAAGk/23CtLS8YkAg/s1600/1.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://3.bp.blogspot.com/-O4Xi9hdrIcw/Ua6uy_seaoI/AAAAAAAAAGE/sCaP-SHLxw8/s1600/2.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://1.bp.blogspot.com/-0zfHMabtxYQ/Ua6uyxnxk6I/AAAAAAAAAGI/kirnAovQ1Co/s1600/3.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://2.bp.blogspot.com/-ZovAMHtjqA0/Ua6uzWwzfJI/AAAAAAAAAGU/m0noOD96QcI/s1600/4.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://2.bp.blogspot.com/-F1BHj-lBbHo/Ua6uzfmMBsI/AAAAAAAAAGY/djcrrtcDz40/s1600/5.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://4.bp.blogspot.com/-DgyHwe7mLfU/Ua6uz5PidkI/AAAAAAAAAG4/8aGiQI4B7oY/s1600/6.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://2.bp.blogspot.com/--iSInI1JOyU/Ua6u0HOzF6I/AAAAAAAAAGo/o5nvF12XfHI/s1600/7.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(http://1.bp.blogspot.com/-kGCPpaEEx64/Ua6u0f-4eiI/AAAAAAAAAG0/ENgfS-CZOCs/s1600/8.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
</div>
</div>