Notice
Recent Posts
Recent Comments
Link
투케이2K
41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시 본문
FrontEnd
41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시
투케이2K 2021. 7. 2. 08:05/* =========================== */
[ 개발 환경 설정 ]
개발 툴 : 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 스크롤 허용합니다
*/
/* =========================== */
반응형
'FrontEnd' 카테고리의 다른 글
Comments