[JQuery] 모달 팝업 동작 시 부모창 스크롤 동작 못하게 하기

모바일 작업을 하다보면 팝업 창을 띄울 때가 종종 있잖아여? 그럴 때 가끔 요청하는 건이 팝업을 띄울 때 뒤에 창이 못움직이게 해주세요.. 이런 요청들이 많이 와요. 그래서 저도 찾아 보다가

요런 방법이 있다는 걸 알고 적용해봤습니다.

수정이 편하기 위해
저는 두 개의 함수를 만들어 줍니다.
1. function bodyScrollDis();
2. function bodyScrollEn();

function bodyScrollDis(){
 $('html, body').css({'overflow':'hidden','height':'100%'}); // 팝업 실행 중 html,body의 스크롤을 hidden 시킨다.
 $('#element').on('scroll touchmove mousewheel',function(event){
  event.preventDefault(); // 이벤트 객의 메소드로 이벤트의 기본 동작을 취소하는 역할.
  event.stopPropagation(); // 이벤트의 전파를 막는 역할.
  return false;
 }); // 터치 및 마우스휠 스크롤를 막는다.
}

function bodyScrollEn(){
 $('html, body').css({'overflow':'auto','height':'100%'}); // 스크롤 hidden 해제 한다.
 $('#element').off('scroll touchmove mousewheel'); // 터치 및 마우스 휠 스크롤 막는 것을 해지한다.
}

위와 같이 함수를 만들어 필요한 이벤트에 적용시키면 실행이 된다.

위에 2가지 이벤트 객체가 보이는데
1. event.proventDefault() : 이벤트의 기본 동작을 취소하는 역할.

예) a 태그를 클릭하면 href 속성에 지정된 url로 이동하지만 위에 이벤트를 사용하면 이동하지 않는다.
(즉, 모든 이벤트를 취소하게 만드는 역할)

2. event.stopPropagation() : 이벤트의 전파를 막는 역할.

예) 자식 요소에서 발생한 이벤트를 부모 요소에서 처리하지 않고 싶을 때, 한 요소에서 발생한 이벤트를 다른 요소에서 처리하지 않고 싶을 때! 사용.


실행 결과는 따로 포기 힘드니 vs code 다운 받아서 html로 파일을 만들어 적용해보자.