How to hide the iframe scrollbar?

Asked

Viewed 11,293 times

0

Because this command is not working?
I wanted the scroll bar to go away. I’ve used width: 0px; in place of display: none; but it didn’t 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>
html css iframe

1 answer

3


If the plan here is to disable the ability to scroll on iframe, use the attribute scrolling="no" which is supported in HTML4, along with the property overflow 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 scroll bar but still have the ability to scroll, you can add an element Parent with the same width of the iframe, less (approximately) the scrollbar width depending on the browser.

If iframe is hosted on your server which is what seems to be the case, this can still be better adjusted by adding a padding-right originally in the source document to be displayed in iframe and then back here to adjust the value here width of the 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>

Additionally

If the file was being presented in a way other than iframe, for example being injected via Ajax, we could still have a smarter approach and define a value for the width of the element Parent calculating the width of the document to be displayed, minus 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;

Browser other questions tagged html css iframe

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