jquery – js/css：禁用滚动条,但保持滚动位置

我正在使用Jquery对话框在页面顶部打开一个弹出窗口。
当我打开对话框时，我想要禁用一般页面滚动。
为了做到这一点，我在做：

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

当对话框打开时，和：

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

当对话框关闭时。

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

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

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

那么，而不是以前的js代码，我正在添加和删除这个类到对话框打开/关闭的身体。

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

所以基本上method1使得内容向右移动，method2使内容移回到顶部。

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

解决方法

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

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.6);
}

固定位置是非常重要的，因为你不想看到白色的边框，它将采取完整的窗口宽度而不是身体。

那么有一点小诀窍

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

这里的目标是在取出滚动条之前取下身体宽度。您的内容将不会移动。

希望它有帮助！

对不起我的英语，不是我的本地语言。

jquery – js/css：禁用滚动条,但保持滚动位置

解决方法

猜你在找的jQuery相关文章