我已经在我的网站下面的iframe:HTML IFRAME - 禁用滚动
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>
,它有滚动条。
如何摆脱它们?
我已经在我的网站下面的iframe:HTML IFRAME - 禁用滚动
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>
,它有滚动条。
如何摆脱它们?
不幸的是,我不相信这是可能在完全符合HTML5只用HTML和CSS属性。幸运的是,大多数浏览器仍然支持scrolling
属性(已从HTML5 specification中删除)。
overflow
不是HTML5的解决方案,因为它是错误的唯一现代浏览器支持这是Firefox。
电流的解决办法是将两者结合起来:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
但是这可能会为浏览器的更新中过时。您可能要检查这一个JavaScript解决方案:http://www.christersvensson.com/html-tool/iframe.htm
编辑:我检查和scrolling="no"
将在IE10,Chrome浏览器25和Opera 12.12的工作。
的
@LinusAn这是我的答案的第一行陈述。问题是虽然浏览器不能完全放弃它,因为它会破坏HTML4网站,所以'滚动'属性仍然是可行的,尽管无效的选项。 – 2014-04-03 09:59:51
这是正确的,但是在Chrome中,这会打破iframe中元素的scrollIntoView。 见https://code.google.com/p/chromium/issues/detail?id=137214 – 2015-06-09 12:32:34
添加这个styles..for您的iframe标签..
overflow-x:hidden;
overflow-y:hidden;
“溢出”不适用于HTML5 iFrames。 *错误*支持的唯一浏览器是Firefox。 – 2013-03-19 08:40:19
@JamesDonnelly其实他没有指明这是HTML5,这就是为什么我们使用溢出 – sasi 2013-03-19 08:42:08
下面的HTML5版本
iframe {
overflow:hidden;
}
在HTML5
<iframe seamless="seamless" ....>
iframe[seamless]{
overflow: hidden;
}
但不支持正确尚未
根据[this](http://caniuse.com/#feat=iframe-seamless)和[this](https://github.com/whatwg/html/issues/331),'seamless'属性有已从规范中删除。 – 2016-06-14 06:12:52
您可以使用下面的CSS代码:
margin-top: -145px;
margin-left: -80px;
margin-bottom: -650px;
为了限制iframe的视图。
'margin-down “一个新的财产,还是你的意思是'margin-bottom'? – 2015-12-25 11:03:03
对于这个框架:
<iframe src="" name="" id=""></iframe>
我想这对我的CSS代码:
iframe#put the value of id here::-webkit-scrollbar {
display: none;
}
似乎使用
html, body { overflow: hidden; }
内 IFrame的
工作编辑: 当然这只是工作,如果你有机会访问iframe的内容(我对我的情况)
虽然使用iframe,但通常无法访问其中的内容,因为它通常用于将内容包含在另一个域中。 – 2016-06-14 06:14:04
由于“overflow:hidden;”属性不正确地在自身的iFrame工作,但似乎里面的时候应用于页面的正文中的iFrame给出的结果,我想这:
iframe body { overflow:hidden; }
其令人惊讶地做工作与Firefox,删除那些烦人的滚动条。
在Safari虽然,一个怪异2像素宽的透明线已经出现在iframe的右侧,它的内容和它的边界之间。奇怪。
将所有的内容:
#yourContent{
width:100%;
height:100%; // in you csss
}
的事情是,iframe的滚动由内容不是由自身的iframe设置。
内容设置为100%,与CSS内地和HTML
所需的IFRAME我尝试滚动=在我目前的浏览器“无”(谷歌浏览器版本60.0.3112.113(正式版本)( 64位)),并没有奏效。但是,scroll =“no”确实起作用。可能是值得尝试
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
实际上,深入挖掘这一点,我认为原因只是我改变高度=“”比我试图加载的实际iFrame更长。所以把高度做得足够长让滚动变得毫无意义,这实际上使得滚动条对我来说是消失了。我试图展示整个页面,但这可能与您尝试实现的内容不同。 – 2017-09-16 13:47:32
这个感觉更像是一个评论,而不是对问题的实际回答。 – jdv 2017-09-16 14:05:40
谢谢JDV!我是StackOverflow的新手,所以我尝试发表评论,但没有足够的声望点或任何它的名称。所以我同意,它应该是一个评论。感谢您的指导! – 2017-09-17 16:25:17
赫尔曼 - 我认为'SCROLLING = “无”'应该work.Its为我工作。它在HTML5中吗? – 2013-03-19 08:34:52
@Yagnesh我有我的iframe的示例,它不工作。 – 2013-03-19 08:37:26
我试过用你的代码,它没有滚动工作正常。请检查iframe是否在任何div下。 – 2013-03-19 08:44:50