Css Safari/Chrome（Webkit）-无法隐藏iframe垂直滚动条_Css_Iframe_Safari_Webkit_Scrollbar

Css Safari/Chrome（Webkit）-无法隐藏iframe垂直滚动条

css iframe safari

Css Safari/Chrome（Webkit）-无法隐藏iframe垂直滚动条,css,iframe,safari,webkit,scrollbar,Css,Iframe,Safari,Webkit,Scrollbar,我在www.example.com上有一个iframe，指向support.example.com（这是一个外域的CNAME）我会自动调整iframe的高度，这样框架就不需要任何滚动条来显示包含的网页在Firefox和IE上，这非常有效，因为我使用了，所以没有滚动条。但是，在webkit浏览器（Safari和Chrome）上，垂直滚动条仍然存在，即使没有滚动条的页面有足够的空间（滚动条变灰）如何隐藏webkit浏览器的滚动条？能否将IFRAME的溢出-yCSS属性设置为可见或隐藏？？我假设

我在www.example.com上有一个

iframe

，指向support.example.com（这是一个外域的CNAME）

我会自动调整iframe的高度，这样框架就不需要任何滚动条来显示包含的网页

在Firefox和IE上，这非常有效，因为我使用了

，所以没有滚动条。但是，在webkit浏览器（Safari和Chrome）上，垂直滚动条仍然存在，即使没有滚动条的页面有足够的空间（滚动条变灰）

如何隐藏webkit浏览器的滚动条？

能否将IFRAME的

溢出-y

CSS属性设置为

可见或隐藏？
？
我假设您已经尝试过，但是否已将IFRAME上的滚动设置为否
<iframe scrolling="no">


试试这个
iframe { overflow:hidden; }

我刚刚遇到了这个问题，并发现修复方法是在iframe
内的页面HTML标记上设置overflow:hidden
，检查滚动是否确实来自iframe，可能来自HTML或正文
用于在iframe中滚动
<iframe scrolling="no">

不要在iframe上使用滚动标记，并将样式添加为
style=“溢出-x:隐藏；溢出-y:自动；”
这将删除水平滚动条，它也应该反过来工作
-Jai这有帮助吗？在Chrome上工作，即，FF
<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>

<body scroll="no">
<div id="test">content</div>
</body>


html{溢出：隐藏；}
#测试{位置：绝对；顶部：50；左侧：50；右侧：50；底部：50；高度：2000px；}
内容
我刚刚在我的博客上解决了这个问题，在样式标签后滚动=“否”
例如：
我把style属性放在那里是因为它更合适，而且在Firefox上工作得很好。
将iframe的滚动属性设置为“否”应该可以解决这个问题，但webkit中似乎有一个bug：
Tim的解决方法（）似乎解决了这个问题--只要您能够编辑iframe中包含的文档…
在chrome put body标记中隐藏iframe滚动，如下所示
<body style="margin:0px; padding:0px; overflow:hidden;"></body>


为了摆脱灰显的滚动条，在Iframe中显示的页面的主体标签上添加“溢出：隐藏”；例如，
这在Chrome 8.0.552.215中对我很有效，我也有“溢出：隐藏”在Iframe本身上，在Ubuntu 10.10下使用Chrome 8.0.552.224 beta版的Iframe仍然显示了该站点上的ghost滚动条：。我尝试了所有适用于所有浏览器但不适用于基于WebKit的浏览器的技巧。因此，这个错误似乎没有被完全修复
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

这有点麻烦，但我解决了这个问题，将
包装在
中，设置
的高度、宽度和溢出：隐藏，然后将
的宽度和高度设置为实际溢出包装


div{高度：100px；宽度：100px；溢出：隐藏}
iframe{高度：150px；宽度：150px；溢出：隐藏}

希望这能有所帮助。
您可以隐藏滚动条并保持滚动功能（通过触摸板或滚轮，或在手机或平板电脑中触摸并拖动，方法是：
<style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>


iframe:：-webkit滚动条{
显示：无；
}  

显然，您可以将iframe更改为适合您的设计的任何内容，并且可以添加等效的-mozilla-property，使其在firefox中也能正常工作
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

这是可行的，其他的似乎都不起作用，包括touchstart的e.preventDefault（）
。

<iframe> <body style="overflow-x: hidden"> </body> </iframe>

1.当您更改iframe的滚动是或否时，iframe的滚动条不会立即显示，您必须刷新iframe
2.iframe colud中的html点击溢出会影响iframe的滚动条
3.在IE中，您必须清除iframe的src，然后刷新iframe，它将正常工作
4.那么，让你看看代码
html
对于IFRAME或所包含网页的html/body标记，将overflow-y css属性设置为直接隐藏似乎没有任何效果。我是否可以以某种方式覆盖此属性？-1overflow-y
不是标准css属性；它只是IE属性。感谢您让我知道Josh！是的。我没有在帖子中漏掉该标志，是的是的，所以它没有显示出来。谢谢你的提示，Tim；它为我解决了这个问题。顺便说一句，似乎将HTML元素的样式设置为溢出：隐藏在样式标记内部不起作用——你需要将它作为HTML标记的样式属性（即使这是无效的）。所以…这个：东西不是这个：HTML{溢出：隐藏；}Chrome/10.0.648.133中的内容无论溢出：隐藏是在
标记中，还是在内联样式中，甚至是在外部样式表中，似乎都会起作用-尽管Chrome在缓存外部样式表方面似乎有点过于激进。也许这个错误多年来一直被修复。如果我添加溢出：隐藏；
到body
标记，而不是html？这是一种蛮力方法，可以解决缺少的功能或错误：）只需在iframe样式中添加overflow:hidden就足以让我在Safari、chrome和IEB中使用滚动设置，难道没有版主可以给出正确答案吗？@Hendrik这取决于打开问题的用户选择正确答案。谢谢@palako。如果你想保持垂直滚动visibl，请注意e、 只需使用：iframe:：-webkit scrollbar:horizontal{display:none；}来仅隐藏水平。您可以将错误答案标记为“nota answer”-因为它不是。这个CSS在最新的Chrome中似乎不起作用，你必须在iframe本身中这样做。子孙后代注意：这是webkit浏览器中的一个bug，已经被修复。下面是bug报告：你为什么不接受任何错误！？
<style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

<iframe> <body style="overflow-x: hidden"> </body> </iframe>

<iframe id="main_ifrm" class="main"  frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>

var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    $(ifrm).prop("scrolling","no");
    $(ifrm.contentWindow.document).find("html").css("overflow","hidden")
    var src = $(ifrm).prop("src");
    $(ifrm).prop("src","");
    $(ifrm).prop("src",src);
}