모달창에서 body scroll 막기
5781 단어 JavaScriptJavaScript
fixed로 화면을 덮는 모달을 열었을 때 모달창이 덮고 있는데 외부 화면이 스크롤 되는게 어색하다는 QA가 있었다.
모달 open state에 따라 외부 화면도 fixed <-> static으로 변경하면 외부화면도 고정이 되었지만 외부화면의 스크롤이 최상단으로 초기화되는 문제가 있었다.
처음에 생각했던대로 event.preventDefault(); 로 막아야겠다는 생각을 했지만
이벤트 리스너에 scroll이 아닌 wheel 이벤트인 것을 알게되어서 조치할 수 있었다.
// 방법 1.
const [isOpen, setIsOpen] = useState(false);
const preventScroll = (e: Event) => {
e.preventDefault();
}
useEffect(() => {
const { body } = document;
if (isOpen) {
body.addEventLitener('wheel', preventScroll, {passive: false})
}
return () => {
body.removeEventListener('wheel', preventScroll)
}
}, [isOpen])
- wheel 같은 passive 이벤트는 preventDefault 사용하려면 passive false가 필요하다
// 방법 2.
useEffect(() => {
const html = document.documentElement;
if (isOpen) {
html.style.overflowY = 'hidden';
} else {
html.style.overflowY = 'auto';
}
return () => {
html.style.overflowY = 'auto';
};
}, [isOpen]);
- 키보드로 화면을 내리는 것까지 막을 수 있다
참고
https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/
Author And Source
이 문제에 관하여(모달창에서 body scroll 막기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gth1123/scroll저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)