js/css:禁用滚动条但保持滚动位置

Question

我正在使用Jquery对话框在页面顶部打开一个弹出框窗口.当我打开对话框时,我希望禁用常规页面滚动.为此,我正在做:

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

对话框打开时,:

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

对话框关闭时

这有效,但是当删除滚动条时,后面的内容会向右移动,结果不太好.

我尝试了另一种方法,通过创建一个css类"noscroll",如下:

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

然后,而不是以前的js代码,我在对话框打开/关闭时添加并删除此类到正文.

现在这适用于滚动条,后面的内容不会向右移动,但使用此方法后面的内容会返回到顶部.

因此,基本上,method1使内容向右移动,而method2使内容移回到顶部.

有谁知道这方面的解决方案？对话框打开时没有滚动后面的内容,禁用滚动时没有移动...？

Answer 1

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

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

你的弹出窗口应该放在一个盒子里

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

然后将这些CSS放在de root div上

#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')
})

这里的目标是在移除滚动条之前获取主体宽度.您的内容不会移动.

希望它有所帮助!

抱歉我的英语,而不是我的母语.

Answer 2

记住偏移应该保持你的弹出窗口;

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

出于安全原因,您可以z-index为您添加一个非常高的#popupholder,但这与问题无关.