如何启用和禁用页面滚动

时间:2016-08-26 16:47:34

标签: javascript jquery html css html5

我的项目只是水平滚动。这意味着X。

#landscape是整个容器。

首先,我禁用#landscape的滚动。

之后,当我点击.close-reveal-modal div淡入时。

在此div中,我仍然无法滚动$('#landscape')。 之后,我想在关闭此$('#landscape')后启用.close-reveal-modal的滚动。

我厌倦了$('#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;
    })
});

1 个答案:

答案 0 :(得分:0)

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