jQuery js/css : 禁用滚动条但保持滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12253802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
js/css : disable scrollbar but keep scroll position
提问by Pierre
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 :
我正在使用 Jquery 对话框在页面顶部打开一个弹出框窗口。当我打开对话框时，我希望禁用常规页面滚动。为此，我正在做：
$('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 :
我尝试了另一种方法，通过创建一个 css 类“noscroll”，如下所示：
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.
然后，我将在对话框打开/关闭时向正文添加和删除此类，而不是之前的 js 代码。
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.
所以基本上method1使内容向右移动，method2使内容移回顶部。
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...?
有谁知道解决方案？对话框打开时后面的内容没有滚动，禁用滚动时也没有移动......？
采纳答案by Karl-André Gagnon
I have made a pretty simple example of my solution.
我已经为我的解决方案做了一个非常简单的例子。
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
然后将这些 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);
}
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
然后是 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')
})
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.
对不起我的英语，不是我的母语。
回答by Karl-André Gagnon
Remembering the offset should keep your popup at bay;
记住偏移量应该可以防止弹出窗口；
HTML
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
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
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');
});
});
For safety-reasons you could add a very high z-indexto your #popupholder, but that's not really relevant to the question.
出于安全原因，您可以z-index为您的增加一个非常高的值#popupholder，但这与问题无关。
回答by Architect
This is the best solution I got so far. And believe me I tried all the others and this is the best and the simplest solution I came up with. It works great on Windows devices, which pushes the page from the right to have room for the system scrollbar and IOS deviceswhich don't require space for their scrollbars in the browsers. So by using this you wont need to add padding on the right so the page doesn't flicker when you hide the overflow of the body or html with css.
这是迄今为止我得到的最好的解决方案。相信我，我尝试了所有其他方法，这是我想出的最好也是最简单的解决方案。它在 Windows 设备上工作得很好，它从右侧推动页面，为系统滚动条和IOS 设备留出空间，这些设备不需要浏览器中的滚动条空间。因此，通过使用它，您无需在右侧添加填充，这样当您使用 css 隐藏 body 或 html 的溢出时，页面就不会闪烁。
The solution is pretty simple if you think about it. The idea is to give the window.scrollTop()the same exact position at the moment that a popup is opened. Also change that position when the window resizes ( as the scroll position changes once that happens ).
如果您考虑一下，解决方案非常简单。这个想法是在打开弹出窗口时为window.scrollTop() 提供相同的确切位置。调整窗口大小时也要更改该位置（因为一旦发生滚动位置就会发生变化）。
So here we go...
所以我们开始...
First lets create the variable that will let you know that the popup is open and call it stopWindowScroll. If we don't do this then you'll get an error of an undefined variable on your page and set it to 0 - as not active.
首先让我们创建一个变量，让您知道弹出窗口已打开并将其称为 stopWindowScroll。如果我们不这样做，那么您将在页面上收到未定义变量的错误并将其设置为 0 - 因为未激活。
$(document).ready(function(){
stopWindowScroll = 0;
});
Now lets make the open popup function witch can be any function in your code that triggers whatever popup you are using as a plugin or custom. In this case it will be a simple custom popup with a simple document on click function.
现在让打开弹出窗口函数可以是代码中的任何函数，可以触发您用作插件或自定义的任何弹出窗口。在这种情况下，它将是一个简单的自定义弹出窗口，带有一个关于单击功能的简单文档。
$(document).on('click','.open-popup', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$('.your-popup').fadeIn(300);
});
So the next thing we do is create the close popup function, which I repeat again can be any function you already have created or are using in a plugin. The important thing is that we need those 2 functions to set the stopWindowScrollvariable to 1 or 0 to know when it's open or closed.
所以接下来我们要做的是创建关闭弹出功能，我再次重复一遍，它可以是您已经创建或在插件中使用的任何功能。重要的是，我们需要这 2 个函数将stopWindowScroll变量设置为 1 或 0，以了解它何时打开或关闭。
$(document).on('click','.open-popup', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$('.your-popup').fadeOut(300);
});
Then lets create the window.scroll function so we can prevent the scrolling once the stopWindowScrollmentioned above is set to 1 - as active.
然后让我们创建 window.scroll 函数，这样我们就可以在上面提到的stopWindowScroll设置为 1 时阻止滚动- 作为活动。
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
Thats it. No CSS required for this to work except your own styles for the page. This worked like a charm for me and I hope it helps you and others.
就是这样。除了您自己的页面样式外，无需 CSS 即可工作。这对我来说就像一个魅力，我希望它可以帮助你和其他人。
Here is a working example on JSFiddle:
这是一个关于 JSFiddle 的工作示例：
Let me know if this helped. Regards.
如果这有帮助，请告诉我。问候。
回答by ale
you can calculate the difference between the body width, before and after the overflow hidden, and apply it as padding-right to the body
您可以计算隐藏溢出之前和之后的正文宽度之间的差异，并将其作为 padding-right 应用于正文
var bodyStartW = $("body").width();
$("body").css("overflow-y" , "hidden");
var bodyEndW = $("body").width();
var bodyMarginL = bodyEndW - bodyStartW;
$("body").css("padding-right" , bodyMarginL);
In Safari you had the same trick for the "html" tag, and margin-right instead of padding-right
在 Safari 中，您对“html”标签有相同的技巧，并且使用 margin-right 而不是 padding-right
