remonpie1814 / sorigarpi

1 stars 2 forks source link

Modal창 스크롤 #25

Open juyayeah opened 6 months ago

juyayeah commented 6 months ago

Modal창 구현시 뒤에 있는 화면에 생기는 스크롤 처리 방법을 어떻게 할지 고민입니다...

https://joylee-developer.tistory.com/185

좋은 의견 부탁해요

remonpie1814 commented 6 months ago

주신 링크에 나온 방법 둘 다 해봤는데 1번은 원래 있던 페이지를 조작해야 해서 약간 불안하고 모달을 표시하는 페이지가 원래 스크롤을 허용하지 않는 페이지였을 때 overflow:auto를 붙여버리거나 하면 깨질 거 같구... 2번은 disableScroll() 함수 구현이 귀찮네요 마우스휠뿐만 아니라 키보드 조작도 막아야 하고 구현한 후에도 Modal 컴포넌트마다 다 붙여넣어야 함

1번으로 한다면 그 페이지의 overflow설정을 props로 넣어주는 처리 해야 할 거 같고 2번으로 한다면 Modal 컴포넌트를 통합해서 하나로 만들든지 하는 게 깔끔할 거 같네요

두 개 말고 다른 방법도 있지 않을까 싶긴 한데 제 머리로는 방법이 떠오르지 않습니다 쏘리

juyayeah commented 6 months ago

헤더에서 메뉴바 나오는 drawers 컴포넌트는 overflow:hidden으로 처리한 거 같긴 한데... https://www.npmjs.com/package/rc-drawer?activeTab=code

스크롤바를 유지하는 게 맞을지도 고민이 되네요 휴~~