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

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 .代码已大为改动，但应归功于应得的功劳。