模態打開時禁用觸摸滾動

Question

我在移動設備上的網站上使用全屏模式。 問題在於，觸摸模態將導致正文頁面移動，即使它已溢出：

這是有關引導的內容：

支持溢出：在iOS和Android中，隱藏在元素上的功能非常有限。 為此，當您在任一設備的瀏覽器中滾動經過某個模式的頂部或底部時，內容將開始滾動。

我該怎么做才能防止這種情況？

將主體設置為position：fixed會使滾動條以難看的方式跳到頂部。 如果有人想出最好的解決方案？

Answer 1

我自己之前也有過同樣的問題。

我所做的就是將主體更改為overflow:hidden且固定的height等於模式height並記住文檔的滾動位置。 關閉模態后，我將回想起的滾動位置和height應用於auto 。

它是如此復雜，因為我需要模態大於窗口，並且希望能夠滾動模態。