我遇到了一个问题,每当我将.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
属性,并设置与打开覆盖时相同的滚动位置。
发布于 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
样式设置为您的滚动位置。
发布于 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
复制相似问题