如何暂时禁用滚动？

Question

我正在使用scrollTo jQuery插件,并想知道是否有可能通过Javascript临时禁用滚动窗口元素？我想要禁用滚动的原因是当你滚动时scrollTo是动画,它变得非常丑陋;)

当然,我可以做一个$("body").css("overflow", "hidden");然后在动画停止时将其恢复为自动,但如果滚动条仍然可见但不活动会更好.

Answer 1

该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 = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

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

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}

Answer 2

只需在主体中添加一个类即可:

.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')

Answer 3

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

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

这在IE6中是一种跳跃式的.

Answer 4

以下解决方案是基本但纯JavaScript(没有jQuery):

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

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

Answer 5

此解决方案将保持当前滚动位置,同时禁用滚动,这与将用户跳回到顶部的一些不同.

它基于galambalazs的回答,但支持触摸设备,并使用jquery插件包装器重构为单个对象.

在这里演示.

在github这里.

/**
 * $.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);

Answer 6

我很遗憾回答一篇旧帖子,但我正在寻找解决方案并遇到了这个问题.

此问题有许多解决方法仍然显示滚动条,例如为容器提供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;

这显示了一个灰色滚动条,希望它可以帮助未来的访问者.

Answer 7

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;
}

Answer 8

我一直在寻找这个问题的解决方案但是对上述任何一个解决方案都不满意(截至写这个答案),所以我提出了这个解决方案..

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);
}

Answer 9

此答案提出了一种解决方案，用于消除应用此解决方案overflow: hidden中的建议时发生的“碰撞” 。由于编辑被拒绝，这里是：

要消除应用时发生的“凹凸”overflow: hidden，您可以计算滚动条的宽度并将其替换为边距。这是该元素的示例body：

const bodyScrollControls = {
  scrollBarWidth: window.innerWidth - document.body.clientWidth,

  disable() {
    document.body.style.marginRight = `${this.scrollBarWidth}px`;
    document.body.style.overflowY = 'hidden';
  },
  enable() {
    document.body.style.marginRight = null;
    document.body.style.overflowY = null;
  },
};

如果某个元素已经有margin-right，那么获取现有元素并向其添加滚动条宽度应该不是问题。

Answer 10

根据galambalazs帖子,我会添加对触摸设备的支持,允许我们触摸但不向上或向下滚动:

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

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

Answer 11

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

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

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

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

我通过使用隐藏的文本区域进行复制粘贴操作而被此咬住了，猜猜是什么，每当我进行复制时页面都会滚动，因为在内部我必须在调用之前选择文本区域 document.execCommand('copy').

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

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

当滚动条暂时消失时，存在闪烁的动量，但这是可以接受的。

Answer 12

从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 });
}

Answer 13

根据您想要通过删除的滚动实现的目标，您可以修复要从中删除滚动的元素（单击或您想要暂时停用滚动的任何其他触发器）

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

上课

.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)
});

Answer 14

你可以这样做：

通过这种方式，您可以节省“微不足道”的内存，并且其中的元素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');
}

例如

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

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

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

//When you want to enable escroll just call this function;

var enableScroll = function () {
   document.documentElement
   .removeAttribute('DisableScroll');
}
 
 setTimeout(() => {
    enableScroll();
}, 2000);