jquery - js/css : disable scrollbar but keep scroll position

Question

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

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

当对话框打开时，并且:

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

当对话框关闭时。

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

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

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

然后，我将在对话框打开/关闭时向正文添加和删除此类，而不是之前的 js 代码。

现在这适用于滚动条，后面的内容不会向右移动，但是使用这种方法，后面的内容会回到顶部。

所以基本上方法 1 使内容向右移动，方法 2 使内容移回顶部。

有人知道解决这个问题的方法吗？对话框打开时后面的内容没有滚动，禁用滚动时没有移动...？

Answer 1

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

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

您的弹出窗口应该在一个框中

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

然后将这些 CSS 放在根 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')
})

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

希望对您有所帮助!

对不起我的英语，不是我的母语。