在添加固定位置时防止页面滚动到顶部
我遇到了一个问题，每当我将.noscroll类添加到正文中时，页面都会滚动到顶部。这样，滚动条仍然可见，但无论何时出现覆盖，滚动条都会变灰。
我知道是addClass()函数导致了这种情况，因为当我注释掉该行时，当我的overlay出现时，它不会滚动到顶部。
jQuery
$('a').click(function(e) {
//reset default anchor behavior
e.preventDefault();
//add noscroll class to body
$("body").addClass("noscroll");
//open overlay box
openOverlayBox();
});openOverlayBox()函数只是一个带有黑色色调的全浏览器屏幕覆盖。
CSS
body.noscroll{
position: fixed;
width: 100%;
overflow-y: scroll;
}Body HTML
<a href="#">Test</a>在将.noscroll类添加到主体后，如何才能使滚动位置保持不变？
EDIT 1:我正在努力实现和Facebook一样的效果。如果查看图片或视频，则会显示覆盖，滚动条呈灰色显示，但滚动位置保持不变。
EDIT 2:我发现了一个与我的问题非常接近的solution，但唯一的问题是，这不会使滚动条变灰，而只是将其删除。此外，当内容居中时，它仍然会使内容向右跳一点，因为正文中的滚动条是隐藏的。
编辑3:在Cuberto的回答和对我自己的一些研究之后，我发现了需要做些什么才能让它正常工作。然而，我不知道如何开始这样做。但这应该是解决问题的方法。I当打开覆盖图时，我需要在position: fixed上设置我的主分区，并将滚动位置的顶值设为负值。退出覆盖时，应删除position: fixed;和top属性，并设置与打开覆盖时相同的滚动位置。
回答 2
Stack Overflow用户
发布于 2013-11-27 09:47:04
快速浏览一下facebook是如何做到这一点的，大概是这样的：
<body>
<div class="main" style="position: fixed; top: -400px"></div>
<div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>对于内联样式，很抱歉。您需要以编程方式将主div的top样式设置为您的滚动位置。
Stack Overflow用户
发布于 2013-11-27 11:49:09
我相信这就是你要找的。
希望你喜欢this fiddle。我采用了你在问题末尾提到的那个，并按照你想要的方式重新做了一遍。
我碰巧在我的网站上做了类似的事情，但直到现在我都没有限制下面的滚动。
Javascript + jQuery：
$(document).ready(function () {
var offsetY = window.pageYOffset,
$body = $('body'),
$win = $(window),
$close = $('.close'),
$open = $('.open'),
$holder = $('#popupholder'),
$stuff = $('#stuff');
// Close with 'esc' key
$(document).keyup(function (e) {
if (e.keyCode == 27) $close.trigger('click');
});
$open.click(function () {
offsetY = window.pageYOffset;
// Block scrolling
$body.css({
'position': 'fixed',
'color': '#FFFF00',
'backgroundColor': '#00D',
'top': -offsetY + 'px'
});
// Show popup
$holder.css('display', 'block');
});
$close.click(function () {
// Allow scrolling again
$body.css({
'position': 'static',
'color': '',
'backgroundColor': ''
});
/**
* Remove the following scrollTop()'s if you want.
* just a UI tweak that the user would expect.
**/
// Make the page stay at the position it was at before the overlay
$win.scrollTop(offsetY);
// Reset the overlay scroll position to the top
$stuff.scrollTop(0);
// Hide popup
$holder.css('display', 'none');
});
});CSS：
#popupholder {
max-height: none;
position: fixed;
background-color: rgba(0, 0, 0, 0.75);
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
#wrap {
max-height: none;
position: fixed;
overflow: hidden;
top: 60px;
right: 60px;
left: 60px;
bottom: 60px;
background-color: rgba(155, 155, 134, 0.5);
display: block;
}
#stuff {
max-height: 100%;
position: absolute;
overflow-y: scroll;
top: 0;
/* If you want the scrollbar inside the overlay to show up, set right: 0; */
right: -20px;
left: 0;
bottom: 0;
padding: 10px;
}HTML：
(节选版本)
<div id="popupholder">
<div id="wrap">
<div id="stuff">
<button class="close">Close me</button>
<p> Inside information </p>
<button class="close">Close me</button>
</div>
</div>
<button class="open">Popup</button>原始码归this answer所有。代码被高度修改，但给出了应得的荣誉。
https://stackoverflow.com/questions/20230435
复制相似问题