모바일 브라우져에서 웹페이지를 스크롤할때 터치해서 움직이는 것에 따라 스크롤이 부드럽게 움직입니다.

손가락을 튕겨내듯 아래로 내리면 스크롤이 쭉~~ 내려가면서 서서히 느려지죠.

그런데 일반적인 웹페이지 스크롤이 아니라, 레이어등에서 높이를 지정해두고 overflow:scroll 로 스크롤을 지정해두었을때는 해당반응이 없고 뭔가 뻣뻣하게 움직이는 느낌을 받은적이 있을겁니다.

그럴때는 해당 div 영역에 아래와 같이 옵션을 추가하시면, 마치 일반적인 웹페이지 스크롤처럼 div 스크롤을 적용할 수 있습니다.

모바일 브라우져에서 해당 옵션이 있고 없고를 두고 테스트해보세요.

일반적으로 사용하는 경우, 해당 영역이 부드럽게 스크롤되지 않습니다.

<div style="width:100px; height:100px; overflow:scroll;">
    <!-- 스크롤이 생기게 하기 위해서 임의로 넣은 데이터 -->
    <div style="height:200px;"></div>
</div>

아래 코드는 해당영역의 스크롤이 부드럽게 됩니다.

<div style="width:100px; height:100px; overflow:scroll; -webkit-overflow-scrolling:touch;">
    <!-- 스크롤이 생기게 하기 위해서 임의로 넣은 데이터 -->
    <div style="height:200px;"></div>
</div>