iframe 滚动条在 Mac 上的 Chrome 中消失

Question

我有一个完整的页面 iframe，但在 chrome 中，滚动条最初加载然后消失，房间在那里，你可以使用它，但它不可见。在 pc 上的 safari、firefox 和 chrome 中完美运行，但在 mac 上，您可以看到滚动条的良好状态，但滚动条本身不见了。

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#me-content{
    height:100%;
    width:100%;
    position:relative;
    border:1px solid #ff9900;
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

<div id="me-branding-bar">

</div>

<div id="me-content">
    <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>

http://jsfiddle.net/RYwty/

Answer 1

为什么在 Mac 上使用 Chrome 时滚动条会在 <iframe> 中消失？

当您的<iframe> 包含来自外部站点的整个页面时，这是一个相当广泛的问题。让我们把它分解成几个步骤。

^{以下示例假设您在 Mac 上使用 Chrome。}

做一个简单的测试

创建一个非常简单的 HTML 页面，将其放入 <iframe>，然后在 Mac 上的 Chrome 中查看 (DEMO)。

滚动条不会消失。一切似乎都很好。所以很可能是外部网站上的某些东西导致了问题。

调试外部站点

症状是滚动条在消失之前实际上出现了很短的时间，但页面仍然可以滚动。也许是 JavaScript 导致了这个问题？让我们禁用 JavaScript 和 try it out。

事实证明，当 JavaScript 被禁用时，滚动条并没有消失。所以 JavaScript 加载的东西导致了这个问题。进一步调试表明，flash 对象是罪魁祸首。

再做一次测试

创建两个简单的 HTML 测试页面并在其中一个中添加一个 flash 对象。将它们放到不同的<iframe>s 和compare them 中看看有什么区别。

<object type="application/x-shockwave-flash"></object>

原来带有 flash 对象的那个没有可见的滚动条。

结论

滚动条不会在普通<iframe> 中消失，而是在带有 flash 对象的情况下消失。这可能是一个错误，也可能是故意的肮脏黑客行为。许多 Flash 广告和视频在 <iframe>s 中提供，并且其中包含滚动条并不美观。

但重点是，您在 <iframe> 中提供外部内容，而这些是您无法控制的。

<iframe src="<?php echo $url;?>"></iframe>

也许您可以尽力解决一两个问题，但是在外部页面中发生的许多事情可能会在这里和那里破坏事情。人们甚至可以在 JavaScript 和 HTTP 标头的帮助下prevent their sites from being placed in an <iframe>。只要页面加载，您就应该对此感到高兴。不要太在意诸如消失的滚动条之类的小细节。仅在页面实际上不可滚动时才担心它。你说的是 Mac 上的滚动。大多数情况下，这是通过手势而不是滚动条来完成的。

如果您确实想要更多地控制外部内容，请考虑使用cURL 和modifying the contents with HTML parsers 在服务器端加载它。

Answer 2

下面的代码似乎解决了 Mac 上 Chrome 中的 iframe 滚动条问题。

此修复与 Mac 和 PC 上的 Firefox、Safari 和 Opera 跨浏览器兼容。

jsfiddle

HTML：

<div id="me-branding-bar"></div>

    <div id="me-content">
        <iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
    </div>

CSS：

body,html{height:100%;overflow:hidden;}
        #me-branding-bar{overflow:hidden;z-index:102;width:100%;height:40px;position:relative;background-color:#ff9900;}
        #me-content{height:100%;width:100%;position:relative;border:1px solid #ff9900;}
        #me-content iframe{border:1px solid #000;}

.iframeclass::-webkit-scrollbar {
    width:10px;
}

.iframeclass::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.02);
}

.iframeclass::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}

Answer 3

从您的 html 中删除样式并添加 scrolling="yes" >> http://jsfiddle.net/95Tes/

<!--same code as before just remove your css styles from the html -->

Answer 4

*{
   margin:0; 
   padding:0;
}
html, body{
   height:100%; 
   width:100%;
}
#me-branding-bar{
   width:100%; 
   height:10%; 
   position:relative; 
   background-color:#ff9900; 
   display:block;
}
#me-content{
   display:block; 
   height:90%; 
   width:100%; 
   position:relative; 
   border:none;
}
#me-content iframe{
   border:none; 
   display:block; 
   overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}

试试link 1link 2

jsfiddle

Answer 5

这段代码可能对你有帮助。我没有mac所以请不要给任何负面评价，我希望。我想说你在css规则和html样式中没有使用不同的样式。你这样使用

<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>


#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

在其他选项卡中查看图像或先保存图像，然后看更清晰！

请使用我修改过的css和html的代码

       <style>
*{
    margin:0px;
    paddinig:0px;
    }

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#clearboth {
   clear:both;
}
#me-content{
    height:calc(100% - 40px);
    width:100%;
    position:relative;
    border:1px solid #ff9900;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
    width:100%;
    height:100%;
}

       </style>

这是修改后的html

         <div id="me-branding-bar">

        </div>

        <div id="clearboth"></div>

        <div id="me-content">
            <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
            src="http://www.tsn.ca"></iframe>
        </div>

希望它会起作用！