how do I get the scrollbars out of my iframe via css?

Asked

Viewed 1,992 times

2

I’m doing an exercise to hide the scrollbars of the iframe 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>

html css
  • 1

    most browsers still support scrolling <iframe src="" scrolling="no" scroll="no" ></iframe> Google Chrome Version 60.0.3112.113 (Official Build) (64 bits) scrolling="no" does not work, however scroll="no" works

3 answers

4


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

Go to the file you’re putting in the iframe in case your think is google-glass.html and on his head put 

<style>

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

  • it worked . but it stopped it does not roll more ! it knows how to make to roll the same in the of the Guanabara?

  • when you click on an area of the image it redirects to a div with id specifies example href="google-glass.html#parte_especifica"

  • valw altwrei people css straight on google-Glass. I found out that it is not the code that is wrong is either browser or my text editor that in the case is notpad++!!! because it up to a certain point of the css code stylizes the pag after css does not alter anyone else knows explain to me why?

2

I am doing this same course and this solution did not solve my problem (which in turn is the same as mentioned above), so I added scrolling="no" in the iframe that solved for all browsers (current) that tested.

was like this: <iframe id="frame-spec" src="google-glass.html" name="janela" scrolling="no"></iframe>

I even took the unnecessary lines from my CSS3

1

People who are also with the bar problem that does not disappear, I found the following solution to the problem: in the file style google-glass.html place:

body::-webkit-scrollbar {

display: none;

}

I hope I helped because I had the same problem.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.