모달 구현 후 북 상세 클릭 시 뒤 화면 스크롤이 하단으로 내려갑... - 인프런

0

질문자

해당 방법은 실패했습니다 ㅠ ㅠ

<Link href={`/book/${id}`} className={style.container} scroll={false}>

이렇게 book-item에 Link에 props로 scroll false로 해결은 했습니다!

0

이정환 Winterlood

지식공유자

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

오잉..? 이런 일이 .. 찾아보니 운영체제나 브라우저의 버전에 따라 스크롤 동작 차이가 있어 요런 이슈가 발생할 수 있다고 합니다.

이 문제를 해결하시려면 Modal 컴포넌트에서 모달이 열릴때 body 태그의 overflow 스타일을 "hidden으로 설정해 스크롤되지 않도록 잠가주시고, 모달이 닫힐 때 다시 overflow 스타일을 ""으로 초기화 해 주시면 됩니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. sunwon lee님 질문에 대해 도움을 드리겠습니다.

모달 구현 후 페이지 스크롤 이슈는 자주 발생하는 문제 중 하나입니다. 모달을 열었을 때 배경 페이지의 스크롤을 비활성화하거나, 모달 닫기 이후 스크롤 위치가 본래 위치로 되돌아가지 않는 경우 이러한 문제가 나타날 수 있습니다. 이는 브라우저 또는 운영 체제(WINDOWS 등)에 따라 다르게 작동할 수도 있습니다.

이 문제를 해결하기 위한 몇 가지 방법을 소개해드리겠습니다:

배경 스크롤 비활성화: 모달을 열었을 때 배경 페이지의 스크롤을 overflow: hidden; 으로 설정하여 비활성화하는 방법입니다. 보통 CSS로 body 태그에 적용합니다.
```
// 모달을 열 때
document.body.style.overflow = 'hidden';


// 모달을 닫을 때
document.body.style.overflow = 'auto';
```

스크롤 위치 저장 및 복원: 스크롤이 이동하는 문제가 지속된다면, 모달을 열 때 현재 스크롤 위치를 저장하고, 모달을 닫을 때 해당 위치로 강제 이동하게 설정합니다.

let scrollPosition;


function openModal() {
    scrollPosition = window.pageYOffset;
    document.body.style.position = 'fixed';  // 이 방법도 좋습니다.
}


function closeModal() {
    document.body.style.position = '';  
    window.scrollTo(0, scrollPosition);
}

브라우저 차이 확인: 같은 코드라도 브라우저 또는 운영 체제에 따라 다르게 작동할 수 있습니다. 크로스 브라우저 테스트를 통해 문제를 확인하고, 특정 브라우저에서만 발생하는 문제라면 그에 대응하는 방법을 추가해야 합니다.

이 방법들이 도움이 되었기를 바랍니다. 추가적으로 문제 해결에 참고할 수 있는 유사 질문이 아래 URL에 있을 수 있습니다. 직접 확인해보시면 큰 도움이 되실 겁니다.

페이지 구현 - 홈 (/)

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

모달 구현 후 북 상세 클릭 시 뒤 화면 스크롤이 하단으로 내려갑니다.