[javascript] mobile 레이어 팝업 시 스크롤 막기

팝업 열때

---

$("html, body").css({"overflow":"hidden", "height":"100%"});
$("#pop").bind("touchmove", function(e) {
	e.preventDefault();
});
$("#pop .popIn").bind("touchmove", function(e) {
	e.stopPropagation();
});

---

1. html과 body 높이를 100%로 설정하고 오버되는 부분은 없앤다.

2. 팝업 최상단 부모의 터치를 금지시키고

3. 팝업 컨텐츠 부분에서 터치 이벤트가 확산되는걸 방지

 

이렇게 하면 레이어 팝업에서 배경 레이어 부분은 터치 이벤트가 안되고

가운데 컨텐츠 부분은 터치 이벤트가 작동한다.

 

팝업 닫을 때

---

$("html, body").css({"overflow":"auto", "height":"auto"});
$('#pop').unbind('touchmove');

---

1. html, body를 기존대로 되돌리고

2. 금지 시켰던 팝업 최상단 부모의 터치 활성화

 

 

확인 가능 url

http://kimc159.cafe24.com/test/touchmove/touchmove.html

Document