如何暂时禁用滚动？

I found this answer on another site:

Disable scroll:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

After close popup release scroll:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

Store scroll length in a global variable and restore it when needed!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

I have similar issue on touch devices. Adding "touch-action: none" to the element resolved the issue.

For more information. Check this out:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

The simplest method is:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

To undo it:

$("body").css("overflow", "auto");

Easy to implement, but the only downside is:

• The page will jump a bit to the left if it is center-aligned (horizontally).

This is due to the scroll bar being removed, and the viewport becoming a bit wider.

我认为取消事件的方法是公认的答案：/

相反，我position: fixed; top: -scrollTop();在下面使用。

演示：https : //jsfiddle.net/w9w9hthy/5/

从我的jQuery弹出项目中：https : //github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

该代码考虑了宽度，高度，滚动条和页面跳转问题。

上面的代码可能解决的问题：

• 宽度，当设置位置固定时，html元素的宽度可以小于100％
• 高度，同上
• 滚动条，固定设置位置后，页面内容不再具有滚动条，即使它在导致水平页面跳转之前具有滚动条
• pagejump，当固定设置位置时，页面scrollTop不再有效，导致垂直页面跳转

如果有人对以上页面的冻结/解冻代码有任何改进，请告诉我，以便将这些改进添加到我的项目中。

这个怎么样？（如果您使用的是jQuery）

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

根据galambalazs的帖子，我将添加对触摸设备的支持，使我们可以触摸但不能上下滚动：

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

以下解决方案是基本但纯JavaScript（无jQuery）的解决方案：

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

这是一种非常基本的方法：

window.onscroll = function () { window.scrollTo(0, 0); };

在IE6中有点跳动。