js / css:如何禁用滚动条,但保持滚动位置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (886)

我使用jQuery对话框打开页面顶部的弹出框窗口。打开对话框时,希望禁用常规页面滚动。为此,我将:

$('body').css({overflow:'hidden'});

当对话框打开时,并且:

$('body').css({overflow:'auto'});

当对话框关闭时。

这是可行的,但当滚动条被删除时,后面的内容会向右移动,结果并不好。

我尝试了另一种方法,通过创建CSS类“noscroll”,如下所示:

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

然后,我将不再使用前面的js代码,而是在打开/关闭对话框时将这个类添加并移除到主体中。

现在,这对滚动条有效,后面的内容不会向右移动,但是使用这种方法,后面的内容会返回到顶部。

有人知道解决办法吗?当对话框打开时,后面的内容没有滚动,也没有禁用滚动的动作...?

提问于
用户回答回答于

我已经做了一个非常简单的例子,我的解决方案。

http://jsfiddle.net/6eyJm/1/

<div id="shadow">
<div id="popup">
    <a id='close' href="#">Close</a>
</div>

然后把这些CSS放在根部分

#shadow{
    display: none;
    position: fixed;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
}

JS

$('#open').click(function(e){
    e.preventDefault()
    $('body').width($('body').width());
    $('body').css('overflow', 'hidden');
    $('#shadow').css('display', 'block');
})
$('#close').click(function(e){
    e.preventDefault()
    $('body, #shadow').removeAttr('style')
})
用户回答回答于

jsfiddle

HTML

<div id="popupholder">
    <button id="close">Close me</button>
</div>


asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br />
<button class="open">Popup</button>
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />

CSS

html, body {
    margin: 0px;
}

#popupholder {
    width: 100%;
    height: 100%;
    position: absolute;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    background-color: rgba(0,0,0,0.75);
    display: none;
}

#close {
    display: block;
    height: 20px;
    margin: 75px auto 0px auto;
}

JavaScript

$(document).ready(function() {
    $('.open').click(function() {
        // Block scrolling
        $('body').css('overflow', 'hidden');

        // Show popup
        var offset = window.pageYOffset;
        //console.log(offset);
        $('#popupholder').css({
            'display': 'block',
            'top': offset + 'px'
        });
    });

    $('#close').click(function() {
        // Enable scrolling
        $('body').css('overflow', 'auto');

        // Hide popup
        $('#popupholder').css('display', 'none');
    });
});

扫码关注云+社区

领取腾讯云代金券