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

Question

所以我遇到了一个问题，我点击了一个自定义模态窗口并移动到视口的顶部，问题是，当你向上滚动时你可以看到下面的页面，所以我需要限制滚动所以模态打开后，你无法向上滚动。这是我使用的jquery。

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");
    }
});

这可以很好地防止滚动，但是当您尝试向上滚动时（仅在Mac上测试），它会在页面顶部创建一个闪烁。它在firefox for mac上并没有那么糟糕，只是一点点白色，但是对于mac来说，当你试图向上滚动时，你可以看到闪烁下面的页面有一点点。有没有什么方法可以解决这个问题并使防滚动更清洁？

编辑：举个例子，我试图使滚动行为与此页面类似。单击其中一个案例研究以打开它，您将注意到它打开到视口顶部，而不是文档，并且无法在模式顶部上方滚动。 https://infinum.co/client-work

编辑编辑：我在这个div上应用的唯一一个是溢出：隐藏和位置：绝对。至于html，它只是一个内容被动态加载的div，所以它会改变，但每个模态的整体结构是相同的。

编辑编辑编辑：我已经添加了一个codepen，但它没有显示我用chrome描述的行为。在codepen上它似乎工作正常。 http://codepen.io/kathryncrawford/full/ZWYLva/

要非常清楚，这只是针对mac的chrome的一个问题，出于一些奇怪的原因。

Answer 1

我们的一位开发人员找到了一个解决方案（经过几个小时的尝试，呃）。我们将模态设置为position：absolute和overflow：scroll，然后当我们打开它时，将body设置为overflow：hidden。这阻止了在身体上滚动并允许我们滚动模态。我们还必须将模态的高度更改为100％，而不是身体的高度才能使其工作。

这是一个更新的代码集，以防你好奇

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

CSS已更改

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

JS改变了

    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,});