防止窗口向上滾動而在自定義模式打開時不會閃爍

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