任何方式來停止頁面BEHIND jQuery工具覆蓋從滾動？

我使用的是jquery tools overlay，它很棒。但是，滾動行爲有點奇怪。如果您打開疊加層並將鼠標置於疊加層上，則如果您位於疊加層的頂部/底部，仍然可以滾動頁面。任何方式來停止頁面BEHIND jQuery工具覆蓋從滾動？

有沒有一種方法（最好是一個jQuery的工具內置的方式），以防止頁面BEHIND覆蓋從滾動？

2011-06-08 Dty

未使用jquery工具，但是當顯示ui對話框時，通常會執行以下操作來防止屏幕滾動。

$("body").css("overflow", "hidden");

您還可以將事件添加到窗口滾動，防止滾動，因爲這SO answer介紹，也該article

來源

2011-06-08 10:07:21 redsquare

這將觸發這使得頁面轉換一個小的滾動條，但它是可以接受的。 – Dty 2011-07-11 02:23:23

@Dty當然，但另一種選擇是將一個處理程序掛接到窗口滾動事件，並在被觸發時返回到原始位置。隱藏滾動條是我認爲的兩個惡意中較小的一個！ – redsquare 2011-07-11 05:53:55

只是看了一下這個。你不能阻止底層頁面滾動，但你可以防止你的OVERLAY滾動它...畢竟這是需要專注的權利？

嘗試將覆蓋的div設置爲CSS @media screen作爲fixed。

來源

2011-06-08 10:38:43 T9b

我相信默認行爲（IE除外）是爲了保持固定。而實際上它是我不想滾動的頁面。如果這樣做會導致我的用戶感到困惑。 – Dty 2011-06-08 10:46:44

實際上，在覆蓋層可見時，您可以將固定CSS臨時應用於背景頁面，並在關閉時將其刪除。正如你正在使用Jquery，你可以通過在你的body上創建一個具有固定參數的類，然後使用'.addClass（）'來應用它和'.removeClass（）'。 – T9b 2011-06-08 13:44:32

謝謝你，但它會在頁面上移動東西。 @redsquare解決方案有點清潔，所以我就這麼做了。 – Dty 2011-07-11 02:24:17

.modal { 
    //your other settings 
    position:absolute !important; 
}

將此添加到CSS以將模式窗口修復到背景。如果模態窗口大於屏幕，整個頁面當然會滾動（包括模態窗口和背景）。

來源

2011-12-07 12:32:43

在這裏你去：

$(function() { 
     $("#element").overlay({ 
      mask: { 
      color: '#000', 
      loadSpeed: 200, 
      opacity: 0.7 
     }, 
     closeOnClick: true, 
     onLoad: function() { 
      $("body").css("overflow", "hidden"); 
     }, 
     onClose: function() { 
      $("body").css("overflow", ""); 
     } 
    }); 
});

來源

2012-04-15 02:34:01 cl0udc0ntr0l

這對我很好。 – 2013-10-09 22:36:40

任何方式來停止頁面BEHIND jQuery工具覆蓋從滾動？

回答

相關問題