아이폰 사파리에서 스크롤이 버벅이는 증상이 간헐적으로 나타났다. 잠깐 멈칫하다가 잠깐 기다렸다가 하면 또 잘되고.. 크롬은 또 별 문제가 없다.
모바일뷰로 맞춰진 화면이었지만, PC 에서 보니, 스크롤바가 이중으로 나타났다.
해결방법이 의외로 단순했다. 안쪽 div 의
overflow: hidden;
처리로 간단히 문제 해결~ 하지만, 진짜 원인이 무언지 궁금했다.
구글링도 해보고, MDN도 보고 했지만, 하하; css 에 대한 이해도가 낮아서 정확한 이유는 모르겠다.
DOM 구조가 다단 div 구조였는데, 상위 div 중 하나에
overflow-x: hidden;
코드가 들어있었다. 이 경우,overflow-y
는 기본값인visible
에서auto
로 변환이 된다. 이렇게 되면서, 스크롤바가 이중으로 생성된 것으로 보인다. 1차 해결법 대신,overflow-x: hidden;
코드를 지워도 해결이 된다.
<aside> 💡 https://stackoverflow.com/questions/19637398/css-overflow-problems-with-fixed-position-divs
</aside>
css 에 대한 이해도를 높여서, 왜 저런 일이 발생했는지를 파악해야 정말 제대로 된 방법을 찾을 수 있을 것 같다. MDN에 단서가 있는 듯 하다. (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)