[🖇 스크롤 체이닝 어떻게 해결할까]

[😱 문제 상황] 1. 모달 안에서 스크롤이 발생한다. 2. 모달에서 스크롤이 끝난 경우 뒤에 위치한 배경에서도 스크롤이 발생한다. 이 경우를 스크롤 체이닝이 발생했다고 합니다. 2번의 동작을 막아야 한다면 어떻게 할 수 있을까요? [🖇 스크롤 체이닝이 발생한 이유] 스크롤 체이닝은 기본적인 브라우저 동작입니다. [💡 어떻게 해결할 수 있나요?] 1. 모달이 열려있는 동안 html에 overflow: hidden 적용 사용하는 모달 라이브러리에 모달이 열려있는 동안 html에 스타일을 위와 같이 적용합니다. 바로 바로 해결할 수 있는 방법이죠. 👏 [🤔 다른 방법은 없을까] 이미 이슈는 해결했지만 오늘 글을 쓰면서 다른 방법을 찾아봤습니다. 그리고 이와 관련된 CSS 속성이 있다는 것을 알았습니다. 그건 바로 overscroll-behavior라는 속성입니다 오버스크롤로 인해 나타나는 양상을 CSS로 처리할 수 있는 점이 좋아보입니다. 다만 이 해결 방식은 iOS 사파리에선 적용되지 않기 때문에 타겟 브라우저에 따라 유연하게 적용하면 될 것 같습니다 정확한 동작 방식이 궁금하신 분들은 아래 링크 참고하시면 좋을 것 같습니다 🥰