스크롤 막는 스크립트
$('선택자').on('scroll touchmove mousewheel', function(event) { event.preventDefault(); event.stopPropagation(); return false; }); | cs |
해제
$('선택자').off('scroll touchmove mousewheel'); | cs |
위의 방법은 스크롤 이벤트를 꺼버린다.
다른 스크롤을 이용하는 다른 이벤트가 있다면 아래의 다른 방법을 사용
다른 방법
// 스크롤 막기 $('html, body').css({'overflow': 'hidden', 'height': '100%'}); // 해제 $('html, body').css({'overflow': 'auto', 'height': 'auto'}); | cs |
모바일 스크롤막기
방법 1번
바디 스크롤 방지 : $("body").bind('touchmove', function(e){e.preventDefault()});
바디 스크롤 해제 : $("body").unbind('touchmove');
방법 1번 사용방법
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeIn();
$("body").bind('touchmove', function(e){e.preventDefault()});
});
방법 1번 해제방법
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeOut();
$("body").unbind('touchmove');
});
방법 2번
스크롤 방지 : $('html, body').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
스크롤 해제 : $('html,body').off('scroll touchmove mousewheel');
방법 2번 사용방법
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeIn();
$('html, body').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
});
방법 2번 해제방법
$('셀렉트').on('click',function(e){
e.preventDefault();
$(팝업창).fadeOut();
$('html,body').off('scroll touchmove mousewheel');
});
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
<html>
<body>
<div id="container">
</div>
</body>
</html>
// 막기
$('#container').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
// 풀기
$('#container').off('scroll touchmove mousewheel');
- by 어린왕자
- 2018/03/12 15:44
- tiger5net.egloos.com/6308818
- 덧글수 : 0
<html>
<body>
<div id="container">
</div>
</body>
</html>
// 막기
$('#container').on('scroll touchmove mousewheel', function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
// 풀기
$('#container').off('scroll touchmove mousewheel');
포스트 메타 정보
퍼블리싱 및 추천
- 내보내기
- 태그 : jquery