모바일에서 부드러운 스크롤

문제

모바일 장치에서 부드러운 스크롤은 좋은 사용자 경험의 핵심이지만, 우리 모두 스크롤 동작이 지연되거나 차단된 경험이 있다고 생각합니다.

원인

이벤트 핸들러는 preventDefault()를 호출하여 기본 동작을 취소할 수 있습니다. 우리의 경우 브라우저는 터치 핸들러 실행이 완료되기 전에 preventDefault()가 호출되는지 여부를 알지 못합니다. 따라서 스크롤을 트리거하기 전에 핸들러가 완료될 때까지 대기하므로 지연이 발생합니다.

해결책

다행히도 다음과 같이 관련 이벤트 리스너의 수동 옵션을 true로 설정하여 이를 피할 수 있습니다.

document.addEventListener(“touchstart”, handler, {passive: true})

이 문제를 해결하려면 처리기가 실행을 완료할 때까지 기다리지 않도록 스크롤이 취소되지 않도록 미리 브라우저에 알려야 합니다. 그리고 이것이 바로 passive: true가 하는 일입니다.

메모

기본값

mdn에 따르면,

If not specified, defaults to false – except that in browsers other than Safari and Internet Explorer, defaults to true for the wheel, mousewheel, touchstart and touchmove events.

여기에는 두 가지 테이크 아웃이 있습니다.

Chrome(버전 56 이상)과 같은 최신 브라우저에서

document.addEventListener(“touchstart”, handler)

와 동등하다

document.addEventListener(“touchstart”, handler, {passive: true})

passive: true 는 wheel , mousewheel , touchstart 및 touchmove 이벤트에 대한 핸들러에만 적용됩니다.

스크롤 방지

스크롤을 방지하고 싶은 경우(예: Google 지도 또는 기타 대화형 iframe) CSS에서 다음을 설정하여 쉽게 취소할 수 있습니다.

touch-action: none;

참조

https://developer.chrome.com/blog/scrolling-intervention/

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters