페이지 스크롤을 사용하거나 사용하지 않도록 설정하는 방법

Question

내 프로젝트는 가로 스크롤 전용입니다. 어떤 의미 X.

#landscape 전체 컨테이너입니다.

먼저, #landscape에 대한 스크롤을 비활성화합니다.

는 그 후 나는에 .close-reveal-modaldiv 페이드를 클릭하면.

을이 div에서 나는 여전히 $('#landscape')을 스크롤 할 수 없습니다. 그 후, .close-reveal-modal을 닫은 후에 $('#landscape')에 대한 스크롤을 다시 사용 가능하게하고 싶습니다.

나는 피곤해서 $('#landscape').off을 쓰면 어떨까요. 그러나 그것은 나를 위해 작동하지 않습니다.

$('#landscape').on('scroll touchmove mousewheel', function(e){ // on off means enable and disable 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false; 
}) 

$('.close-reveal-modal').click(function(){ 
    setTimeout(function(){ 
     $('#second_load').fadeIn(300); 
    }, 1000); 
}); 

$('#second_load').click(function(){ 
    $('#second_load').fadeOut(300); 

    $('#landscape').off('scroll touchmove mousewheel', function(e){ // on off means enable and disable 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    }) 
}); 

Answer 1

function freeze() { 
     var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop(); 
     var left = $("html").scrollLeft() ? $("html").scrollLeft() : $("body").scrollLeft(); 
     if(window.innerWidth > document.documentElement.clientWidth) { 
      $("html").css("overflow-y", "scroll"); 
     } 
     if(window.innerHeight > document.documentElement.clientHeight) { 
      $("html").css("overflow-x", "scroll"); 
     } 
     $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top, "left": -left}); 
} 
function unfreeze() { 
     $("html").css("position", "static"); 
     $("html, body").scrollTop(-parseInt($("html").css("top"))); 
     $("html, body").scrollLeft(-parseInt($("html").css("left"))); 
     $("html").css({"position": "", "width": "", "height": "", "top": "", "left": "", "overflow-y": "", "overflow-x": ""}); 
} 

자료 : https://github.com/HubSpot/vex/issues/155