關於iframe頁面嵌入後在ios裝置上position=fixed屬性失效的解決辦法
阿新 • • 發佈:2019-02-05
專案中有個需求時在頁面的最下面有一排按鈕,這排按鈕需要固定到頁面的最下面,不能隨著螢幕的滾動為滾動。
問題:
功能是使用css的position:fixed; bottom:0;屬性設定的。
單獨一個頁面訪問,不管在PC上還是移動裝置上都可以正常顯示。
But,當這個頁面被一個iframe嵌入的時候,在ios裝置上footer一直處在頁面內容的最下面,而不是螢幕的最下面。而PC和android裝置上可以正常顯示。
原因:iframe嵌入後,ios裝置不支援position:fixed;屬性。
解決辦法:
方案1:.動態計算footer的高度,而且footer的高度時相對iframe計算的,所以footer的高度(top)是 = 螢幕滾動條的高度 + 螢幕的高度 - header的高度 - footer的高度。
當時親測,在ipad上是不支援window.scroll事件的,沒法獲取真正的scrollHeight的值。如果添加了touchmove事件,但獲取的pageY高度又不準確,時刻在變化,導致footer上下閃動。 【親測失敗,請高人指教!!!】
方案2:設定body的高度為一個固定值,即body{height:600px;overfolw-y:auto;} ,這樣footer就能永遠停在螢幕的最下面了。但是body體中出現滾動條,需要隱藏起來。