터치화면의 자연스러운 스크롤을 위한 webkit-overflow-scrolling

webkit-overflow-scrolling은 스크롤 화면의 자연스러운 스크롤, 특히 Safari 및 Chrome과 같은 웹킷 기반 브라우저에서 웹 페이지를 부드럽게 스크롤할 수 있도록 하기 위해 사용되는 CSS 속성입니다. 사용자의 손가락이 화면에서 쉽게 미끄러져 스크롤 동작을 방해할 수 있는 터치 기반 장치에서 overflow: scroll 또는 overflow: auto로 요소를 스크롤하면 스크롤이 고르지 않고 응답하지 않을 수 있습니다. 이 속성은 사용자가 부드럽고 반응이 빠른 스크롤을 기대하는 스마트폰 및 태블릿과 같은 터치 기반 장치에 특히 유용합니다.

webkit-overflow-scrolling은 모멘텀 기반 스크롤을 활성화하여 터치 스크롤시 발생했던 문제를 해결합니다. 이 기능으로 스크롤이 더 매끄럽고 터치스크롤 반응이 빨라집니다. 

 

사용법

사용법은 간단합니다. 스크롤이 발생하는 요소에 다음과 같이 -webkit-overflow-scrolling 속성을 작성하고 값으로 touch 값을 넣어주면 터치스크롤에 대한 빠른 반응을 기대할 수 있습니다.

.container {
  height: 200px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

 

주의점

• webkit-overflow-scrolling은 웹킷 관련 속성이며 일부 브라우저에서는 작동하지 않을 수 있습니다.
• 스크롤이 완전히 멈출 때까지 스크롤 이벤트가 발생하지 않는 경우가 있습니다. 특정 기능에 대한 스크롤 이벤트에 의존하는 경우 문제가 발생할 수 있습니다.
• z-인덱스 문제에 대한 보고가 있었습니다. 맨 위에 있어야 하는 요소가 스크롤 가능한 콘텐츠 아래에 표시되는 경우가 있습니다.
• 위치가 고정된 요소(position:fixed)에 문제가 발생할 수 있습니다. 예를 들어 고정 헤더가 스크롤할 때 올바르게 렌더링되지 않을 수 있습니다.
• webkit-overflow-scrolling 모멘텀 스크롤링 동작은 사용자가 지정할 수 없습니다. 모멘텀 스크롤은 브라우저에 의해 결정됩니다.

 

몇가지 주의점만 조심하면 대부분의 경우 이 속성을 사용하여 터치 기반 장치 사용자의 스크롤 환경을 크게 개선할 수 있습니다.

---

모멘텀 스크롤

모멘텀 스크롤(Momentum Scroll)은 사용자가 화면을 스크롤 할 때 자연스럽게 스크롤이 감속되면서 움직이는 효과입니다. 사용자가 손가락으로 화면을 빠르게 스와이프하면, 스크롤은 빠르게 움직이다가 서서히 속도를 줄여 멈춥니다. 이는 마치 물체가 마찰력 때문에 서서히 멈추는 것처럼 느껴집니다. 

모바일 또는 패드등과 같이 사용자의 터치로 반응하는 기기에서 특히 많이 사용됩니다.