如何暂时禁用滚动?

我正在使用scrollTo jQuery插件，想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是，当你滚动而scrollTo是动画，它变得非常难看;)

当然，我可以做$("body").css("overflow"， "hidden");然后当动画停止时把它放回自动，但如果滚动条仍然可见但不活跃会更好。

当前回答

网站我继承了，有一个滚动的链接。为了暂时禁用滚动单击特定按钮，这对我来说是有效的:

$(document).ready(function() {      
    $('button.class-name').click(function(event) {
        disableScroll();
        setTimeout(enableScroll, 500);  
    });
});


function disableScroll() {
    scrollTop =  window.pageYOffset || document.documentElement.scrollTop; 
    scrollLeft =  window.pageXOffset || document.documentElement.scrollLeft, 

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

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

2020-11-10 23:32:52

其他回答

我知道这是一个老问题，但我不得不做一些非常相似的事情，在花了一段时间寻找答案并尝试了不同的方法后，我最终使用了一个非常简单的解决方案。

我的问题非常相似，几乎相同，唯一的区别是我不需要实际显示滚动条-我只需要确保它的宽度仍然被使用，所以当我的覆盖显示时，页面的宽度不会改变。

当我开始滑动覆盖到屏幕，我做:

$('body').addClass('stop-scrolling').css('margin-right', 8);

在我将覆盖层从屏幕上滑动后，我这样做:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

重要:这是完美的工作，因为我的叠加是绝对定位，对:0px时可见。

2014-10-02 18:56:07

我刚刚整理的一些东西:

斯菲德尔

2017-02-20 17:16:09

你可以这样做:

这样你就节省了“无关紧要”的内存，Position: fixed中的元素没有移动，因此不会影响你的设计本身。

CSS(使用CSS使您的生活和记忆更容易)

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

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

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

e.g

//When you want to enable escroll just call this function; var enableScroll = function () { document.documentElement .removeAttribute('DisableScroll'); } setTimeout(() => { enableScroll(); }, 2000); *{ margin: 0px; padding: 0px } body{ height: 4000px; background: #141417 } html[DisableScroll] { overflow-y: scroll } html[DisableScroll] body { overflow-y: hidden; height: 100vh; } body>p{ color: #FBFBFD } div{ position: fixed; left: 0; right: 0; margin: auto; width: 270px; background: #FBFBFD; color: #141417; text-align: center } <!DOCTYPE html> <html lang="en" DisableScroll> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ </div> @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ @@@@ </body> </html>

2021-10-21 14:55:39

这个解决方案将保持当前的滚动位置，而滚动是禁用的，不像有些跳回用户顶部。

它是基于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);

2014-02-03 17:25:23

this.style.overflowX = 'hidden'; 您可以在函数中使用此代码行，并在被单击的特定元素上工作。

2022-12-15 19:02:04

如何暂时禁用滚动?

推荐文章

最新文章

标签