無法滾動<body>而MS IE11中啓用全屏時

我有一個使用Bootstrap3的固定頁眉和頁腳。下面的內容是可滾動的。用戶可以通過F11或按鈕（使用FullScreen-API）啓用全屏模式。這在Chrome和FF中運行良好，但在IE11中存在問題。全屏與F11的作品總是很好。但是使用JavaScript切換全屏模式會導致我的頁面在使用IE11時被放置在寬度和高度縮小的頂部底部。我的頁眉和頁腳保持不變。無法滾動<body>而MS IE11中啓用全屏時

<body> 
    <header>Fixed</header> 
    <main>Scrollable</main> 
    <footer>Fixed</footer> 
</body>

我創建了一個小提琴，可以顯示我在做什麼。不幸的是，全屏不會在JSFiddle中切換，因此更好地將代碼複製到其他地方：https://jsfiddle.net/j122kdju/

以下是網站的兩個屏幕截圖。我給了這個html一個綠色的背景顏色，看看當通過JS API啓用全屏時發生了什麼。第一張圖片顯示不全屏網頁在IE11：

第二個節目通過JS API在IE11全屏啓用：

我可以通過CSS設置HTML寬度處理這個問題到100％。無論如何，溢出頁面不能再滾動。滾動條不可見。如上所述，這在其他瀏覽器中可以正常工作。

是否有任何解決方法可用？我在這裏錯過了什麼嗎？由於

編輯：也許相關：IE cannot scroll while in fullscreen mode

來源

2015-11-06 Fidel90

這是一個瀏覽器的bug嗎？我已經嘗試了以下全屏示例頁面，並且在IE11中也無法滾動，在通過HTML5 API啓用全屏模式後：http://robnyman.github.io/fullscreen/index-high-content.html – Fidel90

當我遇到這個問題時，我在Fullscreen API的github網站上添加了一個問題：https：//github.com/whatwg/fullscreen/issues/23 – KMK

@KMK：好的，希望這有助於:)現在我必須禁用全屏選項在IE中... – Fidel90

您可以嘗試像你說的HTML寬度設置爲100％，然後迫使身體有使用

body { 
overflow-y: scroll; 
}

來源

2015-11-06 08:35:19 steiacopi

我已經有'溢出-y：auto;'在我的'body'元素上。將其改爲「滾動」不起作用。 IE11仍然不會顯示滾動條和滾動內容是不可能的...... :( – Fidel90

如果你想有一個滾動條整個頁面的全屏解決方案是發送「document.body」爲IE11和「document.documentElement」爲Chrome和Firefox

看到我在這裏完整的答案： IE cannot scroll while in fullscreen mode

來源

2017-06-11 10:08:37 eliz82

無法滾動<body>而MS IE11中啓用全屏時

回答

相關問題