我对tfe的解决方案进行了一些微调。特别地,我添加了一些额外的控制来确保在将滚动条设置为hidden
时,页面内容不会发生偏移(也称为页面偏移)。
可以定义两个JavaScript函数lockScroll()
和unlockScroll()
,分别用于锁定和解锁页面滚动。
function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}
function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$body.css({'margin-right': 0, 'margin-bottom': 0});
}
我假设 <body>
没有初始的 margin。
请注意,虽然上述解决方案在大多数实际情况下都有效,但并不是最终的解决方案,因为它需要进一步定制,以适应包含诸如带有 position:fixed
的页眉等页面。让我们通过一个例子来了解这种特殊情况。假设有:
<body>
<div id="header">My fixedheader</div>
<!
</body>
#header{position:fixed; padding:0; margin:0; width:100%}
然后,在函数lockScroll()
和unlockScroll()
中应添加以下内容:
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
最后,注意一些可能的边距或填充的初始值。