Javascript和CSS移動設備友好全屏覆蓋

我正在研究一個jQuery的燈箱類型插件，需要爲移動設備和桌面功能。我遇到了全屏疊加效果的問題。從我的研究看來，標準解決方案似乎是使用position: fixed或background-attachment: fixed來實現疊加效果。當然，移動設備不支持固定定位，所以我試圖找到另一種方式。Javascript和CSS移動設備友好全屏覆蓋

現在，我將一個函數附加到$(window).on('resize')以獲取窗口的新尺寸併爲它們設置疊加層。我看到的問題是，這是觸發閃爍的滾動條，當我縮小窗口大小時，會使整個事情變得非常激動。你可以在這裏看到效果：（http://jsfiddle.net/dominic_p/ZqLCx/3/或http://3strandsmarketing.com/lightbox.php）。

任何想法如何解決這個問題？該代碼仍處於繁重的發展階段，所以它有點亂，但我試圖突出顯示我認爲jsFiddle中的兩個問題區域的內容，其中有一條評論說"THE PROBLEM: START"。

UPDATE： 我有一個絕妙的主意，以定位只是改變以fixed的桌面瀏覽器，仍然依靠我的移動瀏覽器調整腳本。它似乎有很大的幫助，但瀏覽器窗口開始變小時（特別是垂直縮小時）仍然有一些明顯的閃爍。此外，在Android 4上使用position: fixed時，屏幕側面會突然出現一個大的白色空白，我只能在肖像模式下水平滾動。任何人都有如何解決這兩個問題的想法？

來源

2012-02-21 Dominic P

我沒有看到閃爍 – 2012-02-22 03:57:56

這很奇怪。你使用的是什麼瀏覽器？在我測試過的一些瀏覽器上，滾動條不會顯示，但居中的內容會跳轉，就好像它們閃爍着。 – 2012-02-22 06:24:23

我檢查了鉻和ie9 – 2012-02-22 15:29:32

閃爍問題的解決方案似乎是將<body>元素的overflow-x（或者只是overflow）屬性設置爲hidden。出於好奇，它實際上不是覆蓋層，而是導致閃爍的燈箱內容。

我還在努力解決Android上出現的白色差距，但這是一個單獨的問題，所以我將其作爲解決方案發布。

來源

2012-02-28 19:54:12

Javascript和CSS移動設備友好全屏覆蓋

回答

相關問題