41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>    



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. overflow : 스크롤 여부를 결정하는 css 속성입니다
    	2. bind : 이벤트 처리를 수행하는 메소드입니다
    	3. 모바일 터치 이벤트 동작 시 start, move 쪽에서 body 스크롤 막고, end 상태일 때 body 스크롤 허용합니다    	
    	*/


    	/* [모바일 터치 시 body 스크롤 막음] */
    	function scrollDisable(){
    		//브라우저에 터치를 막아 스크롤 비활성
    		document.body.style.overflow = 'hidden';
    		$("html, body").css({'overflow':'hidden'}).bind('touchmove'); 
    	};


    	/* [모바일 터치 시 body 스크롤 허용] */
    	function scrollAble(){
    		//브라우저에 터치를 다시 활성화 및 스크롤 활성
    		document.body.style.overflow = 'auto';
    		$("html, body").css({'overflow':'auto'}).unbind('touchmove'); 
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. overflow : 스크롤 여부를 결정하는 css 속성입니다

2. bind : 이벤트 처리를 수행하는 메소드입니다

3. 모바일 터치 이벤트 동작 시 start, move 쪽에서 body 스크롤 막고, end 상태일 때 body 스크롤 허용합니다

*/

/* =========================== */