如何暂时禁用滚动？

scroll 事件无法取消。但是您可以通过取消这些交互事件来做到这一点：
鼠标 & 触摸滚动和与滚动相关的按钮。

[工作演示]

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

更新：修复了带有被动监听器的 Chrome 桌面和现代移动浏览器

---

只需向主体添加一个类即可：

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

当你想重新启用滚动时，添加类然后删除，在 IE、FF、Safari 和 Chrome 中测试。

$('body').addClass('stop-scrolling')

对于移动设备，您需要处理 touchmove 事件：

$('body').bind('touchmove', function(e){e.preventDefault()})

并取消绑定以重新启用滚动。在 iOS6 和 Android 2.3.3 中测试

$('body').unbind('touchmove')

---

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

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

在 IE6 中有点跳动。

---

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

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

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

---

此解决方案将在禁用滚动时保持当前滚动位置，这与将用户跳回顶部的某些解决方案不同。

它基于 galambalazs' answer，但支持触摸设备，并使用 jquery 插件包装器重构为单个对象。

Demo here.

On github here.

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */

;(function($) {

    "use strict";

    var instance, proto;

    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);

        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];

        this.disable();
    }

    proto = UserScrollDisabler.prototype;

    proto.disable = function() {
        var t = this;

        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];

        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );

        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });

        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };

    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };

    proto._handleWheel = function(event) {
        event.preventDefault();
    };

    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };

    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };


    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {

        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }

        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }

    };

    // Global access
    window.UserScrollDisabler = UserScrollDisabler;

})(jQuery);

---

很抱歉回答旧帖子，但我正在寻找解决方案并遇到了这个问题。

有许多解决方法可以解决此问题以仍然显示滚动条，例如为容器提供 100% 的高度和 overflow-y: scroll 样式。

在我的例子中，我刚刚创建了一个带有滚动条的 div，我在将 overflow: hidden 添加到正文时显示该滚动条：

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

元素滚动条必须具有以下样式：

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

这显示了一个灰色滚动条，希望它对未来的访问者有所帮助。

---

var winX = null;
var winY = null;

window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});

function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
}

function enableWindowScroll() {
    winX = null;
    winY = null;
}

---

我一直在寻找解决此问题的方法，但对上述任何解决方案都不满意（在撰写此答案时），所以我想出了这个解决方案。

CSS

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

JS

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

---

从 Chrome 56 和其他现代浏览器开始，您必须将 passive:false 添加到 addEventListener 调用才能使 preventDefault 工作。所以我用它来停止在移动设备上滚动：

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

---

不，我不会使用事件处理，因为：

并非所有事件都能保证到达身体，

选择文本并向下移动实际上会滚动文档，

如果在事件分离阶段出现问题，你注定要失败。

我已经通过使用隐藏的 textarea 进行复制粘贴操作来解决这个问题，猜猜看，每当我进行复制时，页面都会滚动，因为在内部我必须在调用 document.execCommand('copy') 之前选择 textarea。

无论如何，这就是我要走的路，请注意 setTimeout()：

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

当滚动条瞬间消失时，存在一种闪烁的势头，但这是可以接受的。

---

根据 galambalazs 的帖子，我将添加对触摸设备的支持，允许我们触摸但不能向上或向下滚动：

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

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

---

根据您希望使用已移除的滚动条实现的目标，您可以只修复要从中移除滚动条的元素（单击时，或您想要暂时停用滚动条的任何其他触发器）

我正在寻找“临时无滚动”解决方案，并且为了我的需要，这解决了

上课

.fixed{
    position: fixed;
}

然后用 Jquery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

我发现这是一个足够简单的解决方案，适用于所有浏览器，也便于在便携式设备（即 iPhone、平板电脑等）上使用。由于元素是临时固定的，所以没有滚动:)

笔记！根据“contentContainer”元素的位置，您可能需要从左侧调整它。当固定类处于活动状态时，可以通过向该元素添加 css left 值来轻松完成

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

---

我正在使用 showModalDialog，将辅助页面显示为模式对话框。

隐藏主窗口滚动条：

document.body.style.overflow = "hidden";

并在关闭模式对话框时，显示主窗口滚动条：

document.body.style.overflow = "scroll";

从对话框访问主窗口中的元素：

parent.document.getElementById('dialog-close').click();

仅适用于搜索 showModalDialog 的任何人：（在原始代码第 29 行之后）

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

---

另一种解决方案：

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

这样你总是有一个垂直滚动条，但由于我的大部分内容都比视口长，这对我来说没问题。内容以一个单独的 div 为中心，但如果没有在正文中再次设置边距，我的内容将保持在左侧。

这是我用来显示弹出窗口/模式的两个函数：

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

结果：由于左侧滚动条，背景不可滚动且内容无法重新定位。使用当前的 FF、Chrome 和 IE 10 测试。

---

这是迄今为止我得到的最简单的解决方案。相信我，我尝试了所有其他方法，这是最简单的。它在 Windows 设备上运行良好，从右侧推动页面为系统滚动条留出空间，而 IOS 设备在浏览器中不需要空间用于滚动条。因此，通过使用它，您不需要在右侧添加填充，这样当您使用 css 隐藏 body 或 html 的溢出时页面不会闪烁。

如果您考虑一下，解决方案非常简单。这个想法是在打开弹出窗口的那一刻给 window.scrollTop() 相同的确切位置。当窗口调整大小时也更改该位置（因为一旦发生滚动位置就会更改）。

所以我们开始...

首先让我们创建一个变量，让您知道弹出窗口已打开，并将其命名为 stopWindowScroll。如果我们不这样做，那么您将在页面上收到未定义变量的错误并将其设置为 0 - 未激活。

$(document).ready(function(){
    stopWindowScroll = 0;
});

现在让打开的弹出函数可以是代码中的任何函数，它可以触发您作为插件或自定义使用的任何弹出窗口。在这种情况下，它将是一个简单的自定义弹出窗口，带有一个简单的单击功能文档。

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

所以接下来我们要做的是创建关闭弹出功能，我再重复一遍，它可以是您已经创建或正在插件中使用的任何功能。重要的是我们需要这 2 个函数将 stopWindowScroll 变量设置为 1 或 0 以了解它何时打开或关闭。

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

然后让我们创建 window.scroll 函数，这样我们就可以在上面提到的 stopWindowScroll 设置为 1 时阻止滚动 - 激活。

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

而已。除了您自己的页面样式外，无需任何 CSS 即可工作。这对我来说就像一个魅力，我希望它可以帮助你和其他人。

这是一个关于 JSFiddle 的工作示例：

JS Fiddle Example

让我知道这是否有帮助。问候。

---

你可以这样做：

通过这种方式，您可以节省“微不足道”的内存，并且带有 Position: fixed 的元素不会移动，因此不会影响您的设计本身。

CSS（使用 CSS 让你的生活和记忆更轻松）

html[DisableScroll] {
    overflow-y: scroll;
}

html[DisableScroll] body {
    overflow-y: hidden;
    height: 100vh;
}

JS

var enableScroll = function () {
   document.documentElement
     .removeAttribute('DisableScroll');
}

例如

//当你想启用 escroll 时只需调用这个函数; var enableScroll = function () { document.documentElement .removeAttribute('DisableScroll'); } setTimeout(() => { enableScroll(); }, 2000); *{ 边距：0px;填充：0px } body{ 高度：4000px;背景：#141417 } html[DisableScroll] { overflow-y: scroll } html[DisableScroll] body { overflow-y: hidden;高度：100vh； } body>p{ 颜色：#FBFBFD } div{ 位置：固定；左：0；右：0；边距：自动；宽度：270px；背景：#FBFBFD；颜色：#141417； text-align: center }

@ @@@

@@@@

@@@@

@@@@

< br>

@@@@

@@@@

@@@@

@@@ @

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@< /p>

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@ @@@

@@@@

@@@@

@@@@

< br>

@@@@

@@@@

@@@@

@@@ @

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@< /p>

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@@@@

@ @@@

@@@@

@@@@

@@@@

@@@@

@@@ @

---