我正在使用Jquery对话框在页面上打开一个弹出框窗口。 当我打开对话框时，我希望禁用一般页面滚动。 为了做到这一点，我正在进行以下操作：
$('body').css({overflow:'hidden'});
$('body').css({overflow:'auto'});
当对话框关闭时。
这个方法可以工作，但是当滚动条被移除时，后面的内容会向右移动，结果不太好看。
我尝试了另一种方法，创建一个名为“noscroll”的CSS类，如下所示：
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
那么，与先前的JS代码不同，我在打开/关闭对话框时向body添加和删除了这个类。
现在，滚动条可以正常工作，后面的内容不会向右移动，但是通过这种方法，背景中的内容回到了顶部。
因此，方法1使内容向右移动，而方法2使内容回到顶部。
有谁知道解决此问题的方法吗？即当对话框打开时，背景中的内容不出现滚动条，禁用滚动时也不会移动...？
我已经制作了一个相当简单的解决方案示例。
你的弹出框应该在一个框里面。
<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')
})
这里的目标是在移除滚动条之前获取页面的宽度，您的内容将不会移动。
希望能对您有所帮助！
抱歉我的英语不好，这不是我的母语。
http://jsfiddle.net/ZG8FU/ - Thanh Nguyen记住偏移量可以使你的弹出窗口保持在原地；
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
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
$(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');
});
});
#popupholder上添加非常高的z-index，但这与问题无关。overflow: hidden; 添加到 #popupholder 中。否则，你可以查看类似于 WebKit 的 ::-webkit-scrollbar { display: none; } 样式的变体。它将访问 Shadow DOM 并完全隐藏滚动条。 - user1467267如果您认真思考，这个解决方案非常简单。其思路是在弹出窗口打开时给window.scrollTop()设置完全相同的位置。同时，当窗口大小改变时更改该位置（因为此时滚动位置也会改变）。
那么，我们开始吧...
首先，让我们创建一个变量，称之为stopWindowScroll，用于指示弹出窗口是否已打开。如果我们不这样做，您的页面将出现未定义变量的错误，并将其设置为0-表示未激活。
$(document).ready(function(){
stopWindowScroll = 0;
});
$(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);
});
$(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);
});
那么我们就创建一个 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);
}
});
就这样。这不需要CSS才能工作，除了页面上自己的样式。这对我来说非常好用，希望能帮助到你和其他人。
以下是JSFiddle上的一个可行示例：
如果有帮助，请告诉我。祝好。
我使用这两个函数来实现相同的目的：
function enableBodyScroll() {
if (document.readyState === 'complete') {
document.body.style.position = '';
document.body.style.overflowY = '';
if (document.body.style.marginTop) {
const scrollTop = -parseInt(document.body.style.marginTop, 10);
document.body.style.marginTop = '';
window.scrollTo(window.pageXOffset, scrollTop);
}
} else {
window.addEventListener('load', enableBodyScroll);
}
}
function disableBodyScroll({ savePosition = false } = {}) {
if (document.readyState === 'complete') {
if (document.body.scrollHeight > window.innerHeight) {
if (savePosition) document.body.style.marginTop = `-${window.pageYOffset}px`;
document.body.style.position = 'fixed';
document.body.style.overflowY = 'scroll';
}
} else {
window.addEventListener('load', () => disableBodyScroll({ savePosition }));
}
}
工作原理：
当您想要禁用滚动并保存当前位置时，请运行 disableBodyScroll({ savePosition: true })。
该函数检查页面是否已加载（因为用户可能在加载过程中触发对话框打开）。
如果页面已加载，则通过在 body 上设置 margin-top 来保存当前滚动位置，然后将其设置为 position: fixed; overflow-y: scroll 以移除滚动条。
如果页面尚未加载，则添加事件侦听器以在页面加载时运行 (3.)。
要启用滚动，一切都相同，但是该函数会删除样式而不是设置它们。
代码来源：https://github.com/funbox/diamonds/blob/master/lib/body-scroll.ts
var bodyStartW = $("body").width();
$("body").css("overflow-y" , "hidden");
var bodyEndW = $("body").width();
var bodyMarginL = bodyEndW - bodyStartW;
$("body").css("padding-right" , bodyMarginL);