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

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上经过测试）。 对于Mac来说，在firefox上还算不错，只是一点点白色，但是对于Mac，在chrome上，当您向上滚动时，您会在闪烁下看到很多页面。 有什么方法可以解决这个问题并使防涡卷器更清洁？

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

编辑：我在此div上应用的唯一CSS是：溢出：隐藏和位置：绝对。 对于html来说，它只是一个div，其内容是动态加载的，因此它会发生变化，但是每个模式的总体结构都是相同的。

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

要非常清楚，出于某些奇怪的原因，这仅是Mac版chrome上的问题。

Answer 1

我们的一位开发人员找到了解决方案（经过数小时的尝试，呃）。 我们将模态设置为position：absolute，overflow：scroll，然后在打开它时将主体设置为overflow：hidden。 这样可以防止在主体上滚动，并允许我们滚动模态。 为了使它起作用，我们还必须将模式的高度更改为100％的动画，而不是身体的高度。

这是更新的codepen，以防您好奇

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