How to hide the iframe scroll bar?

Navigation
0

Why is this command not working? I wanted the scroll bar to disappear. I already used width: 0px; instead of display: none; but it did not work either. 

<!DOCTYPE html>
<html lang="pt-br">
<read>
    <meta charset="UTF-8"/>
    <title>Tudo Sobre Google Glass</title>
    <link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
    <link rel="stylesheet" type="text/css" href="_css/specs.css">
    <style>
        iframe#frame-spec::-webkit-scrollbar {
            display: none;
        }
    </style>
</read>
<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 Vinícius Vedovotto</h2>
                    <h3 class="direita">Atualizado em 11/Setembro/2017</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" usemap="#meumapa"/>
                <map name="meumapa">
                    <area shape="rect" coords="179,202,270,260" href="google-glass.html#tela" target="janela"/>
                    <area shape="circle" coords="158,243,12" href="google-glass.html#camera" target="janela"/>
                    <area shape="circle" coords="73,52,12" href="google-glass.html#gadgets" target="janela" />
                    <area shape="poly" coords="28,143,83,216,84,249,27,169" href="google-glass.html#sensores" target="janela" />
                </map>
                <iframe src="google-glass.html" name="janela" id="frame-spec"></iframe>
            </section>  
        </article>
    </section>

    <footer id="rodape">
        <p>Copyright &copy; 2017 - by Vinícius Vedovotto <br/>
        <a href="https://facebook.com/viniciusveu" target="_blank">Facebook</a> | <a href="https://twitter.com/viniciusveu" target="_blank">Twitter</a></p>
    </footer>
</div>
</body>
</html>
    
asked by anonymous 18.09.2017 / 08:17

1 answer

3

If the plan here is to disable the ability to scroll in iframe , use the scrolling="no" that is supported in HTML4, along with the overflow property to support HTML5: 

#frame-spec{
    overflow-y: hidden;
}
<iframe scrolling="no" height="150" src="google-glass.html" name="janela" id="frame-spec"></iframe>

If the plan is to hide the scrollbar but still have the ability to scroll, you can add a parent element with the same iframe width, less (roughly) scrollbar, depending on the browser.

  

If the iframe is hosted on your server which is what seems to be the case, this can still be best adjusted by adding a padding-right originally in the source document to be displayed in the iframe and then back here to set the width of element scroll-escondido . 

.scroll-escondido {
    width: 285px; /* menos 5px (scroll width) do que a largura do iframe (Chrome) */
    height: 150px;
    overflow: hidden; /* importante para cortar o cumprimento do elemento */
}
#frame-spec{
    width: 300px;
    height: 150px;
}
<div class="scroll-escondido">
    <iframe src="google-glass.html" name="janela" id="frame-spec"></iframe>
</div>
  

Still further      

If the file were to be presented other than iframe, for example being injected via Ajax, we could still take a smarter approach and set a value for the parent element width by calculating the width of the document to be displayed, less the width of the scrollbar, with Javascript as follows: 

var se = document.getElementById('scroll-escondido');
var seIframe = document.getElementById('frame-spec');
var calcW = seIframe.clientWidth - seIframe.scrollWidth;

se.style.width = calcW;
    
18.09.2017 / 12:28
How to align radio button and label, with Bootstrap 3.x? jQuery: .val () in select element only returns the value of the first option