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

所以，我遇到了一個問題，我有一個自定義模式窗口打開點擊並移動到視口頂部，問題是，當您向上滾動時，您可以看到頁面下方，所以我需要限制滾動，以便在模式打開後無法向上滾動。這是我用過的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

編輯編輯：唯一的CSS我在這個div上應用溢出：隱藏和位置：絕對。至於html，它只是一個動態加載內容的div，所以它會改變，但是每個模式的總體結構都是一樣的。

編輯編輯編輯：我已經添加了一個codepen，但它不顯示我用鉻描述的行爲。在codepen上它似乎工作正常。 http://codepen.io/kathryncrawford/full/ZWYLva/

要超級清晰，這只是mac上的一個問題，出於某種奇怪的原因。

來源

2016-02-29 Kathryn Crawford

你有沒有嘗試過任何問題的答案在這裏：HTTP ：//stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with -jquery –

我已經嘗試設置溢出隱藏，但我認爲這是一個瀏覽器的具體問題，並不起作用。我想我可以通過點擊將滾動條移動到文檔頂部，但我認爲這看起來不太好。儘管如此，我會盡力而爲。 –

另外要清楚的是，我不想完全阻止滾動，我只是想阻止用戶在模態窗口的頂部滾動。 –

我們的一位開發人員發現了一個解決方案（經過數小時的嘗試，唉）。我們設置模式的位置：絕對和溢出：滾動，然後當我們打開它設置身體溢出：隱藏。這阻止了滾動的身體，並允許我們滾動模態。我們還必須將模式的高度更改爲動畫的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,});

來源

2016-02-29 23:15:35

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

回答

相關問題