데브툴이나 일부 환경에서는 정상적으로 동작하는데, 모바일 크롬과 사파리에서 스크롤이 먹히지 않는 경우가 있다. 마치 overflow: 'hidden'인 것처럼 화면이 잘린 상태에서 스크롤이 동작하지 않아 잘린 부분을 확인할 수가 없다.
이 경우 body나 html에 아래의 style을 추가하면 된다.
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;만약 React CRA처럼 body나 html이 직접 노출되지 않는 경우라면 DOM을 이용해도 괜찮다.
document.body.style.overflowY = 'scroll';
document.body.style.overflowX = 'hidden';
document.body.style['-webkit-overflow-scrolling'] = 'touch';단, 이 방법은 만병통치약은 아니다.
엄밀히 얘기하면 문제가 되는 컴포넌트의 스크롤을 고치는 것이 아니라 어떤 이유에서든 상속받는 css가 기타 코드가 꼬일 일이 가장 적은 코드 최상단에 스크롤을 넣는 것으로 보인다. 그렇기 때문에 스크롤바가 생성될 때 스타일을 넣은 문서 전체에 스크롤바가 생긴다.
하지만 이 때문에 하위 컴포넌트들에서 사용하는 스크롤이 문제가 되지는 않으니 모바일 웹에서 화면 스크롤이 먹통일 때만 한번 시도해봄직하다.
참고
How to fix buggy scroll problem in mobile Chrome/Safari browser?
