[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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72qBiusWtWJcd5E5IpVRWQPJjsfxKf3AtEXQfUmdBGevEtA0_wGiMCVy2kS4C7DSViQM6GihjidBWZ-SLBsupITdT88HZbTeWOowK2-F50zZwtcYlmWCetvKs2psORRnzXFCpSejCrJ8/s1600/1.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBC9Z4lTyt_U37vGGGM6XTXzknJdP8wCP6z2WPYpBkipl3MUBudvQH7vST57sY6gaWlgrEYBo4BWoGxkcTaXFsGjG1N0YzQEfz7jp08vCYYF8P9fzmdQjuaeXIWSVtEnoVU62ZG698Pw/s1600/2.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvmhwh9KZ7BskLU7ZocAxKBIuAHLP70Mz0fbQzT3eNE4UKdFJFjMaHkcnd1v1-35MPdn81HfnXxu3s8q6CwoyT5XHHum9ugsnLS_EDAnJ9Nty4brT3uq2Ut5BjzCnEwQmXcLwxJ93ZbE/s1600/3.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PH0YefFnst6NpGt4qMZVs8ziFLAaYvhKgnAaSsPIwaFp7ev1Rh9_Sq632ZwvNe6pTGnvLhv2xkB1wIxQvQ-7kStCy_-Gc02xxZHGt0-0Ad44qJIIKK12Ts81uh7ekOvjBgyc6KNzfFw/s1600/4.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKS6suwCKZeYr6OtUYuEwhMuPcY57uMPFbUvszUe5iNNhzfGv3_8KHU91iEJlPmiIHFvgtHNbaJUZC632T70vbXYiOiq61tJrB1P2xDoJVNLpftaif-Tr2wLpqYbZ0xsUGdgz0ZsxVk_M/s1600/5.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXpbHsc-BG_60YZ5ZLk_awk_cEjDirOCQSHuJh637i7IhWavj7EN3qj0MtqyketymcjL8QWmx_CFv3hl7OrXUTYO2w_YTMIhyphenhyphen1X2UYvGEFECVaDu7XZTCApLDyrtlw-xVyN4GBjiZfBeg/s1600/6.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunDXbxxWvQ09OqbdpJfTiuKIq1G195i-OZr-q-S4sEsk2Ptv9Or2NEpNIsKKFCN2PEXBybQzaBFxnpw1jVSaBn80ru7AquuekeDDZcvjTK7ug-Z8UdkGS8UaksEbR74fOjUIokGLG4hg/s1600/7.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijHFWao8B9XV5vhDWnayZMkqJipopMmW-Smuq7mjDuJZkc7dlRqA-rWF23Osw7iLNg3cTy6LWZlmBv94UfW-q5H4C9wKLMvM0POpjkcow4DyctyiMbFUM39EYTfov4FlDGMo5Q-JfSrAI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72qBiusWtWJcd5E5IpVRWQPJjsfxKf3AtEXQfUmdBGevEtA0_wGiMCVy2kS4C7DSViQM6GihjidBWZ-SLBsupITdT88HZbTeWOowK2-F50zZwtcYlmWCetvKs2psORRnzXFCpSejCrJ8/s1600/1.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBC9Z4lTyt_U37vGGGM6XTXzknJdP8wCP6z2WPYpBkipl3MUBudvQH7vST57sY6gaWlgrEYBo4BWoGxkcTaXFsGjG1N0YzQEfz7jp08vCYYF8P9fzmdQjuaeXIWSVtEnoVU62ZG698Pw/s1600/2.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvmhwh9KZ7BskLU7ZocAxKBIuAHLP70Mz0fbQzT3eNE4UKdFJFjMaHkcnd1v1-35MPdn81HfnXxu3s8q6CwoyT5XHHum9ugsnLS_EDAnJ9Nty4brT3uq2Ut5BjzCnEwQmXcLwxJ93ZbE/s1600/3.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PH0YefFnst6NpGt4qMZVs8ziFLAaYvhKgnAaSsPIwaFp7ev1Rh9_Sq632ZwvNe6pTGnvLhv2xkB1wIxQvQ-7kStCy_-Gc02xxZHGt0-0Ad44qJIIKK12Ts81uh7ekOvjBgyc6KNzfFw/s1600/4.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKS6suwCKZeYr6OtUYuEwhMuPcY57uMPFbUvszUe5iNNhzfGv3_8KHU91iEJlPmiIHFvgtHNbaJUZC632T70vbXYiOiq61tJrB1P2xDoJVNLpftaif-Tr2wLpqYbZ0xsUGdgz0ZsxVk_M/s1600/5.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXpbHsc-BG_60YZ5ZLk_awk_cEjDirOCQSHuJh637i7IhWavj7EN3qj0MtqyketymcjL8QWmx_CFv3hl7OrXUTYO2w_YTMIhyphenhyphen1X2UYvGEFECVaDu7XZTCApLDyrtlw-xVyN4GBjiZfBeg/s1600/6.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunDXbxxWvQ09OqbdpJfTiuKIq1G195i-OZr-q-S4sEsk2Ptv9Or2NEpNIsKKFCN2PEXBybQzaBFxnpw1jVSaBn80ru7AquuekeDDZcvjTK7ug-Z8UdkGS8UaksEbR74fOjUIokGLG4hg/s1600/7.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijHFWao8B9XV5vhDWnayZMkqJipopMmW-Smuq7mjDuJZkc7dlRqA-rWF23Osw7iLNg3cTy6LWZlmBv94UfW-q5H4C9wKLMvM0POpjkcow4DyctyiMbFUM39EYTfov4FlDGMo5Q-JfSrAI/s1600/8.jpg); display: inline-block; height: 174px; width: 150px;">
</div>
</div>
</div>