Prevent page scrolling to top upon adding fixed position

后端未结

关注

 2  1275

I\'m facing a problem where the page is scrolling to the top whenever I add my .noscroll class to the body. This way the scrollbar is still visible but greyed out w

相关标签:

2条回答

醉酒成梦

2021-02-04 03:44
Taking a quick look at how facebook does it, it's something like this:
```
<body>
  <div class="main" style="position: fixed; top: -400px"></div>
  <div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>
```
Sorry for the inline styles. You need to programmatically set the main div's top style to your scroll position.
0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2021-02-04 03:45

I believe this is what you are looking for.

Hope you enjoy this fiddle. I took the one you referenced at the end of your question and re-worked it the way you wanted.

I happened to have done something similar to this on my site but I never restricted the scrolling underneath until now.

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:

(abridged version)

<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>

Original code credit goes to this answer. Code was highly altered but credit given where credit is due.

0 讨论(0)