如何暂时禁用滚动?

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

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

当前回答

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

对于这个问题，仍然有许多变通办法来显示滚动条，比如给容器一个100%的高度和一个overflow-y: scroll样式。

在我的情况下，我刚刚创建了一个div与滚动条，我显示，同时添加overflow:隐藏到主体:

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;

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

2012-02-29 04:12:55

其他回答

您可以阻止空格条滚动和隐藏浏览器滚动条:

$(document).keydown(function(event) {
    if (event.keyCode == 32) {
        return false;

    }
});

document.documentElement.style.overflow = 'hidden';
document.body.scroll = 'no';

2014-07-04 21:51:37

一个对我有用的简单解决方案(暂时禁用窗口滚动)。

基于此提琴:http://jsfiddle.net/dh834zgw/1/

下面的代码片段(使用jquery)将禁用窗口滚动:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

在你的css中:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

现在，当你删除模态时，不要忘记删除html标签上的noscroll类:

$('html').toggleClass('noscroll');

2016-03-01 06:46:47

我刚刚整理的一些东西:

斯菲德尔

2017-02-20 17:16:09

我也有同样的问题，下面是我处理它的方法。

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

希望这对你有所帮助。

2017-12-18 03:55:52

在我看来，取消事件是一个可怕的方法:/

相反，我使用position: fixed;上图:-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% 高度，同上滚动条，当设置位置固定时，页面内容不再有滚动条，即使它在水平页面跳转之前有滚动条页面跳转，当设置位置固定时，页面滚动顶部不再有效，导致垂直页面跳转

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

2016-06-10 19:45:20

如何暂时禁用滚动?

推荐文章

最新文章

标签