防止窗口向上滚动而在自定义模式打开时不会闪烁

Question

So I had an issue where I had a custom modal window open up on click and move to the top of the viewport, problem was, when you scrolled up you could see the page beneath, so I needed to limit the scrolling so you couldn't scroll up once the modal was open. Here's the jquery I used.

var top = window.pageYOffset;

$(document).on("scroll", function(e){
    var windowScrollTop = $(window).scrollTop();
    if(windowScrollTop < top){
        console.log("not allowed");
        $(document).scrollTop(top);
    }
    else{
        console.log("allowed");
    }
});

This works fine for preventing scrolling, but it creates a flicker at the top of the page when you try to scroll up (only been tested on mac). It's not so bad on firefox for mac, just a little strip of white, but on chrome for mac, you can see a good bit of the page underneath flicker when you try to scroll up. Is there any way to get around this and make the scroll prevention cleaner?

EDIT: for an example, I'm trying to make the scrolling behave similarly to this page. Click on one of the case studies to open it and you will notice it opens to the top of viewport, not the document, and scrolling above the top of the modal is not possible. https://infinum.co/client-work

EDIT EDIT: The only css I have applied on this div is overflow:hidden and position:absolute. As for html, it's just a div with content being loaded in dynamically, so it changes, but the overall structure is the same for every modal.

EDIT EDIT EDIT: I've added a codepen, but it doesn't display the behavior that I am describing with chrome. On codepen it appears to work fine. http://codepen.io/kathryncrawford/full/ZWYLva/

To be super clear, this is only an issue on chrome for mac, for some weird reason.

Answer 1

One of our devs found a solution (after hours of trying, ugh). We set the modal to position: absolute and overflow: scroll, then when we opened it set the body to overflow: hidden. That prevented scrolling on the body and allows us to scroll the modal. We also had to change the height of the modal to animate to 100% rather than the height of the body to get this to work.

Here's an updated codepen in case you're curious

http://codepen.io/kathryncrawford/full/ZWYLva/

CSS changed

.s-case-expand {
opacity: 0;
display: none;
position: absolute;
overflow: scroll;
}

JS changed

    expandTl.set(caseExpand, {zIndex: 100, backgroundColor: color})
                .set("body", {overflow: "hidden"})
                .to(caseExpand, 0.5, {opacity: 1})
                .to(caseExpand, 1, {width: width, height: "100%", top: top, left: 0,});