帶有溢出-x 內容的 iframe 的水平滾動條：隱藏

Question

我正在處理一個寬度為 760 像素的登錄頁面，並且需要一個包含 980 像素寬度的內容（Flash 演示）的 iframe。 所以我需要有一個水平滾動條才能查看整個內容。 但是，無論我添加什么滾動屬性（例如 scrolling="auto/yes" 等），都不會發生任何事情 - 根本沒有水平滾動條。

iframe中顯示的頁面在源碼中有如下命令：

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow-x: hidden;
}

據我了解，這就是我的 iframe 中沒有水平滾動條的原因。 有沒有辦法解決這個問題？

Answer 1

您應該將iframe包裝在包含div ，將固定寬度應用於容器。

——

HTML

<div class="container">
    <iframe></iframe>
</div>

——

CSS

.container {
    width: 980px;
    height: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Answer 2

嘗試使用 javascript 更改 iFrames (body/child) 溢出。

就像是：

window.onload=function(){
 document.getElementById(one).setStyles({ 'overflow': 'auto' });
};

也許這個，不確定哪個會得到 iframes 的正文：

window.onload=function(){
    var frame = document.getElementById('one'),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.setStyles({ 'overflow': 'auto' });
};

Answer 3

在 iframe 中提及寬度和高度

並添加overflow-y:hidden; overflow-x:scroll overflow-y:hidden; overflow-x:scroll iframe 樣式的overflow-y:hidden; overflow-x:scroll

<iframe width="300" height="315" src="http://webstarts.com" frameborder="0" style="overflow-y:hidden; overflow-x:scroll;"></iframe>

這是jsFiddle 文件

Answer 4

按照塞爾吉奧的回答，當我發現自己遇到同樣的問題時，我使用 jQuery 做了什么：

• 獲取 iframe
• 尋找屍體
• 應用不同的溢出屬性

$('#iframe').contents().find('body').css('overflow', 'auto');

一旦頁面完全加載，所有這一切，當然：

$(document).ready(function() {...});

現在它按照我的預期顯示滾動條

Answer 5

您應該使用溢出-x：可見。 如果您的內容托管在其他地方，由於跨域問題，您將無法更改。

想象一下，如果您擁有一個網站，而其他人想要 iFrame 您的網站並對其進行更改（如果您可以更改溢出，您實際上可以更改任何樣式，這將是一個巨大的安全漏洞）。 這就是你不能的原因。

Answer 6

在“body”的 CSS 規則中，沒有指定“寬度”。 如果我理解正確，如果沒有寬度，那么這樣的內容不能水平溢出任何內容。 它不能比任何東西“更寬”，因為它沒有“寬度”，所以它也不能溢出。

所以我會嘗試為 iFrame 中顯示的文檔正文提供一個寬度屬性。

當然，這可能適用於某些瀏覽器，但不適用於其他瀏覽器。