개발자포럼

개발관련 이슈 및 팁을 공유해보세요.

프론트엔드

프론트엔드 개발에 대한 주제포럼입니다.

#모바일 브라우져에서 overflow:scroll 부드럽게 스크롤하기

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

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

그런데 일반적인 웹페이지 스크롤이 아니라, 레이어등에서 높이를 지정해두고 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>
알쯔
LV.17