js / css：禁用滚动条，但保持滚动位置 [英] js/css : disable scrollbar but keep scroll position

问题描述

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

  $（'body'）css '}）;当对话框打开时，
  

，并且：

  $（'body'）。css（{overflow：'auto'}）; 
 
 
 
此对话框关闭时，
  

$ b工作，但当滚动条被删除时，内容向后移动到右侧，结果不好。

我试过另一个方法，通过创建一个css类noscroll，如此：

  body.noscroll 
 {
 position：fixed; 
 overflow-y：scroll; 
 width：100％; 
} 
  

然后，我添加和删除这个类到对话框打开/关闭的主体。

现在这适用于滚动条，并且后面的内容不会向右移动，但使用此方法

因此，基本上method1使内容向右移动，method2使内容向上移动。

有没有人知道这个解决方案？

解决方案

我有没有在对话框打开时向后滚动内容作为我的解决方案的一个很简单的例子。

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

您的弹出式窗口应该在框中

 < div id =shadow> 
< div id =popup> 
< a id ='close'href =＃>关闭< / a> 
< / div> 
   

CSS on de root div

  #shadow {
 display：none; 
 position：fixed; 
 top：0; 
 bottom：0; 
 width：100％; 
 height：100％; 
 background-color：rgba（0,0,0,0.6）; 
} 
  

位置固定是非常重要的，因为你不想看到白色边框

pre> $（'＃open'）。click（function（e）{
e.preventDefault（）
$（'body'）。width 'body'）。width（））;
$（'body'）css（'overflow'，'hidden'）;
$（'＃shadow' 'block'）;
}）
$（'＃close'）。click（function（e）{
e.preventDefault（）
$（'body，#shadow '）.removeAttr（'style'）
}）


删除滚动条之前的主体宽度。您的内容不会移动。

希望它帮助！

对不起我的英语，

I'm using the Jquery dialog to open a popup box window on top of a page. When I open the dialog box, I want the general page scrolling to be disabled. To do so, I am doing :

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

when the dialog opens, and:

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

when the dialog closes.

This works but when the scrollbar is being removed, the content in the back moves to the right and the result is not nice.

I tried another method, by creating a css class "noscroll", as such :

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

then, instead of the previous js code, I'm adding and removing this class to the body on dialog open/close.

Now this works for the scrollbar and the content in the back doesn't move to the right, but with this method the content in the back goes back to the top.

So basically method1 makes the content move to the right, and method2 makes the content move back to the top.

Does anyone know a solution for this? no scroll for the content in the back when the dialog opens, and no movement on disabling scrolling...?

解决方案

I have made a pretty simple example of my solution.

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

Your popup should be in a box

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

Then put those CSS on de root div

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

Position fixed is really important since you dont want to see the white border, it will take full window width and not body.

Then there's the little JS trick

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

The goal here is to take the body width before removing the scroll bar. Your content will not move.

Hope it help!

Sorry for my english, not my native langage.

这篇关于js / css：禁用滚动条，但保持滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！