javascript jQuery/CSS：固定覆盖不应允许背景滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6815884/
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
jQuery/CSS: fixed overlay should not allow scrolling of background?
提问by matt
i have a overlay box that is fixed and centered on the screen. The page itself is rather long and has a vertical scrollbar.
我有一个固定的覆盖框并在屏幕上居中。页面本身相当长并且有一个垂直滚动条。
I'd like to disable scrolling of the page itself once the overlay is shown. However I can't disable scroll completely because some overlays do have overflow-y:scrollfor themselves. So the content in the overlay should be scrolled but the page itself should be stuck.
一旦显示叠加层，我想禁用页面本身的滚动。但是，我无法完全禁用滚动，因为某些叠加层确实具有overflow-y:scroll自己的功能。所以应该滚动覆盖中的内容，但页面本身应该被卡住。
Any idea how to solve that with jquery or css?
知道如何用 jquery 或 css 解决这个问题吗？
采纳答案by AshHeskes
The quickest and dirtiest way I can think of is to attach an event listener to the window for scroll events, and preventDefault() if your overlay is visible.
我能想到的最快和最脏的方法是将事件侦听器附加到滚动事件的窗口，如果覆盖可见，则 preventDefault() 。
like so (using jquery).
像这样（使用jquery）。
window.addEventListener('scroll', function(e){
var el = $('.overlay.active');
if( el.length > 0 ){
e.preventDefault();
}
});
Hope this is what your looking for.
希望这就是你要找的。
回答by marc
回答by Studocwho
Just an adjustment to Marc's jQuery solution. My code disables the body scroll as the overlay appears, then when the body or overlay close button is clicked, the body scroll is re-enabled.
只是对 Marc 的 jQuery 解决方案的调整。我的代码在覆盖出现时禁用正文滚动，然后当单击正文或覆盖关闭按钮时，重新启用正文滚动。
/*We disable the scroll*/
$(function() {
/*This is where we specify what button is being clicked to open the
overlay, change at will.*/
$('#overlay1').click(function() {
/*This is where we specify what part of the page is gonna disable the
scroll, in this case the body.*/
$('body')
.css('overflow', 'hidden');
});
/*Now we re-enable the scroll*/
/*This is where we specify the the part of the overlay that is being
clicked to close it, in this case, the body and the .close, change at will.*/
$('body, .close').click(function() {
/*This is where we specify the part of the page we are re-enabling
the scroll, in this case the body.*/
$('body')
.css('overflow', 'visible');
});
});
Here's a little JSFiddleof my script in action.
这是我正在运行的脚本的一些JSFiddle。
回答by jeroen
You could create an full width and full height container, with position: fixed. And inside this container create your actual overlay with info. The container basically blinds the user from scrolling or interacting with the page.
您可以创建一个全宽和全高的容器，使用position: fixed. 在这个容器内用信息创建你的实际覆盖。容器基本上使用户无法滚动页面或与页面交互。
回答by jrharshath
You can position your overlay as a {position: fixed;}. That will keep your overlay in your screeneven if your page scrolls.
您可以将覆盖图定位为{position: fixed;}. 即使您的页面滚动，这也会使您的叠加层保留在屏幕上。
