how do I get scrollbars from my iframe via css?

1

I'm doing an exercise to hide the iframe's scroll bars but something went wrong! again!

function mudaFoto (foto)
	{
		document.getElementById("icone").src=foto;
	}
@charset"UTF-8";
section#conteudo {
	width: 1000px;
	margin: auto;
	
}
iframe#frame-spec {
	width: 380px;
	height: 280px;
	border: none;
	overflow: hidden;
}
iframe#frame-spec::-webkit-scrollbar {
	display:none;
}
	
<!DOCTYPE html>
	<html lang=pt-br>
	<head>
		<meta charset="UTF-8"/>
		<title>Tudo sobre Google Glas</title>
		<link rel="stylesheet" href="_css/estilo.css"/>
		<link rel="stylesheet" href="_css/specs.css"/>
		
	</head>
	<script language="javascript" src="_javascript/funcoes.js"></script>
	<body>
	<div id="interface">
	<header id="cabecalho">
			<hgroup>
			<h1>Google Glass</h1>
			<h2> A revolução do Google está chegando</h2>
				</hgroup>
			<img id="icone"src="_imagens/glass-oculos-preto-peq.png">
		<nav id="menu">

			<h1>Menu Principal</h1>

			<ul type="disc">

			<li onmouseover="mudaFoto('_imagens/home.png')" onmouseout="mudaFoto('_imagens/especificacoes.png')"><a href="index.html">Home<a/></li>
			<li onmouseover="mudaFoto('_imagens/especificacoes.png')" onmouseout="mudaFoto('_imagens/especificacoes.png')"><a href="specs.html">Especificações<a/></li>
			<li onmouseover="mudaFoto('_imagens/fotos.png')" onmouseout="mudaFoto('_imagens/especificacoes.png')"><a href="fotos.html">Fotos<a/></li>
			<li onmouseover="mudaFoto('_imagens/multimidia.png')" onmouseout="mudaFoto('_imagens/especificacoes.png')"><a href="multimidia.html">Multimídia<a/></li>
			<li onmouseover="mudaFoto('_imagens/contato.png')" onmouseout="mudaFoto('_imagens/especificacoes.png')"><a href="Fale-conosco.html">Fale conosco<a/></li>
			</ul>
		</nav>
	</header>
<section id="corpo-full">
	<article id="noticia-principal">
		<header id="cabecalho-artigo">
			<hgroup>
			<h3>Glass > Especificações</h3>
			<h1>Raio-X no Google Glass</h1>
			<h2>por Gustavo Guanabara</h2>
			<h3 class="direita">Atualizado em 01/Maio/2013 </h3>
			</hgroup>
		</header>
		<p>Clique em qualquer área destacada da imagem para ter mais informações sobre os recursos do Google Glass. Qualquer ponto vermelho vai te levar a um lugar cheio de novas informações.</p>
		<section id="conteudo">
			<img src="_imagens/glass-esquema-marcado.jpg"/>
			<iframe src="google-glass.html" name="janela" id="frame-spec"></iframe>
		</section>
</article>
</section>

		<footer id="rodape">

		<p>Copyright &copy; 2013 - by Gustavo Guanabara<br/>
		<a href="http://facebook.com/cursoemvideo"target="blank">Facebook</a> | 
		<a href="http://twitter.com/cursoemvideo"target="blank">Twitter</a></p>
		</footer>
	</div>
	</body>
	</html>
    
asked by anonymous 02.11.2017 / 16:06

1 answer

1
<iframe src="google-glass.html" name="janela" id="frame-spec"></iframe>

Go to the file that you are placing in the iframe in case you think it is google-glass.html and in the head of it put

<style>

body{
  overflow: hidden !important;
  }
  
</style>
    
02.11.2017 / 16:48