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

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


当前回答

另一个解决方案:

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。

其他回答

这个答案提出了一个解决方案,用于删除overflow: hidden时发生的“bump”。由于编辑被拒绝,下面是:


要删除overflow: hidden应用时发生的“凹凸”,您可以计算滚动条的宽度并用margin代替它。下面是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;
  },
};

如果元素已经有右边距,那么获取现有的右边距并为其添加滚动条宽度应该不是问题。

我使用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();
});

你可以这样做:

这样你就节省了“无关紧要”的内存,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');
}

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> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> </div> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> <p>@@@@</p><br> </body> </html>

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

基于Cheyenne Forbes的回答,以及我在这里通过fcalderan找到的答案:只是禁用滚动而不是隐藏它? 并修复了Hallodom的滚动条消失的问题

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

这段代码确实会跳到页面的顶部,但我认为fcalderan的代码有一个解决方案。