Question

每当我将.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：我发现问题非常接近solution，但唯一的问题是这不会使滚动条变灰，只是将其删除。此外，当内容居中于中间时，它仍会使内容向右跳一点，因为隐藏了正文中的滚动条。

编辑3：在Cuberto的回答和对自己的一些研究之后，我发现需要做些什么才能让它工作我想要的。但是我不清楚我将如何开始这样做。但这应该解决它。我在打开叠加层时需要在position: fixed上设置主div，并在滚动位置设置负顶值。退出叠加层时，应删除position: fixed;和top属性，并设置与打开叠加层时相同的滚动位置。

Answer 1

我相信这就是您所寻找的。

希望你喜欢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。代码被大大改变，但在信用到期时给予信用。

Answer 2

快速浏览一下facebook如何做到这一点，就像这样：

<body>
  <div class="main" style="position: fixed; top: -400px"></div>
  <div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>

对不起内联样式。您需要以编程方式将主div的{{1}}样式设置为滚动位置。

添加固定位置后，防止页面滚动到顶部

2 个答案:

Javascript + jQuery：

CSS：

HTML：