Kid*_*ond 17 html javascript css jquery
每当我将我的.noscroll课程添加到正文时,我都会面临一个问题,即页面滚动到顶部.这样滚动条仍然可见,但每当叠加层出现时都会变灰.
我知道这是addClass()函数的原因,因为当我注释掉那一行时,当我的叠加层出现时它不会滚动到顶部.
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;
}
正文HTML
<a href="#">Test</a>
将.noscroll课程添加到身体后,如何使滚动位置保持不变？
编辑1:我试图在Facebook上实现相同的目标.如果您查看图片或视频,则会显示叠加层,滚动条将显示为灰色,但会保留滚动位置.
编辑2:我找到了一个非常接近我的问题的解决方案,但唯一的问题是这不会使滚动条变灰,而只是删除它.此外,当内容居中于中间时,它仍会使内容向右跳一点,因为隐藏了来自正文的滚动条.
编辑3:在Cuberto的回答和对自己的一些研究之后,我发现需要做些什么才能让它工作我想要.但是我不清楚我将如何开始这样做.但这应该解决它.我打开叠加时我需要设置我的主div position: fixed和滚动位置的负顶值.退出叠加层时,应删除position: fixed;和top属性,并设置与打开叠加层时相同的滚动位置.
Der*_*yck 22
我相信这就是你要找的东西.
希望你喜欢这个小提琴.我拿了你在问题末尾引用的那个并按照你想要的方式重新加工.
我碰巧在我的网站上做了类似的事情,但直到现在我从未限制下面的滚动.
$(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');
});
});
#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;
}
(删节版)
<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>
原始代码信用转到这个答案.代码被大大改变,但在信用到期时给予信用.
sbk*_*ing 18
快速浏览一下facebook如何做到这一点,它是这样的:
<body>
<div class="main" style="position: fixed; top: -400px"></div>
<div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>
对不起内联样式.您需要以编程方式将main div的top样式设置为滚动位置.
| 归档时间： |
|
| 查看次数： |
31176 次 |
| 最近记录： |