웹페이지의 UI에 터치 스크롤을할 경우 일반적인 스크롤은 스크롤된 영역만큼 움직이고 손을 떼는순간 바로 멈추게된다. iOS에서는 사용자 경험 개선을 위해? 사용자가 UI를 스크롤할 경우 해당 요소에 가속도 기반의 스크롤을 사용할지를 아래의 css값을 사용하여 처리할 수 있다.

위 속성은 ‘auto’, ‘touch’ 두가지 값을 가지는데 ‘auto’는 가속도가 없는 일반적인 스크롤, ‘touch’는 가속도 기반의 스크롤을 가능하게 해준다. Ios에서만 제공하는 비표준 속성이지만 만족도는 꽤 높은 것 같다.  하지만 이 속성을 사용하면 두가지 이슈를 확인해야 한다.

1. iOS 5.0 이상의 모바일 사파리에서 사용이 가능하다.
2. 해당 이슈 사용시 가속도가 붙어서 엘리먼트보다 더 큰 범위까지 스크롤 되어 배경색이 black으로 노출된다. 부모 요소에 배경색을 주어도 스크롤 속성 자체가 해당 엘리먼트에 적용되어 내부에 여백?이 생기는거라 해결되지 않는데. 해결 방법으로는 속성을준 요소에 아래의 값을 주면된다. padding-top만으로 해결이 되지만 여백이 생기므로 margin-top으로 땡겨준다. 랜더링 원리는 알 수 없지만 해당 값으로 해결할 수 있다.

css 관련 속성은 브라우저 업데이트 되면서 개선 되더라도 로직 이슈가 아니라 케이스 별로 정리해두고 참고하는게 좋을 것 같다. 퇴근을 막는건 UI로직 보다는 랜더링 관련된 이런 이슈들이 많으니까ㅠ