강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

Full Stack 개발자님의 프로필 이미지
Full Stack 개발자

작성한 질문수

한 입 크기로 잘라먹는 Next.js(v15)

모달창 오류

해결된 질문

작성

·

95

0

  1. 북 상세페이지에서 모달창이 제대로 작동하지만 다음과 같은 오류가 발생합니다. 왜그런걸까요?

Skipping auto-scroll behavior due to position: sticky or position: fixed on element: <dialog class=​"modal_modal__ocKFE" open>​…​</dialog>​scroll Error Component Stack

at InnerScrollAndFocusHandler (layout-router.js:139:9)

at ScrollAndFocusHandler (layout-router.js:216:11)

at RenderFromTemplateContext (render-from-template-context.js:16:44)

at OuterLayoutRouter (layout-router.js:365:11)

at body (<anonymous>)

at html (<anonymous>)

at RootLayout [Server] (<anonymous>)

at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9)

at HTTPAccessFallbackBoundary (error-boundary.js:98:11)

at RedirectErrorBoundary (redirect-boundary.js:75:9)

at RedirectBoundary (redirect-boundary.js:83:11)

at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9)

at HTTPAccessFallbackBoundary (error-boundary.js:98:11)

at DevRootHTTPAccessFallbackBoundary (dev-root-http-access-fallback-boundary.js:33:11)

at ReactDevOverlay (ReactDevOverlay.js:80:9)

at HotReload (hot-reloader-client.js:379:11)

at Router (app-router.js:183:11)

at ErrorBoundaryHandler (error-boundary.js:120:9)

at ErrorBoundary (error-boundary.js:166:11)

at AppRouter (app-router.js:563:11)

at ServerRoot (app-index.js:145:46)

at Root (app-index.js:165:11)

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

요 에러는 CSS 상에서 발생하는 에러로 보이는데요 일단 기능적으로 문제가 되는 부분은 아니므로 무시하셔도 괜찮습니다! 자세히 말씀드리자면, dialog로 구현된 모달 창에 position:sticky, 또는 position:fixed가 적용되어 있는데 이로 인해 브라우저가 모달 창의 자동 스크롤을 건너 뛰게 된다는 경고성 문구입니다. 모달의 기능에 영향을 주지는 않으므로 무시하셔도 괜찮습니다. 만약 제거하고 싶으시다면 모달 최상위 태그에 overflow:auto 속성을 추가하셔도 됩니다.

Full Stack 개발자님의 프로필 이미지
Full Stack 개발자

작성한 질문수

질문하기