0

Porque esse comando não está funcionando?
Eu queria que a barra de rolagem sumisse. Ja usei width: 0px; no lugar de display: none; mas também não deu certo.

<!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>

1 Resposta 1

3

Se o plano aqui é desabilitar a habilidade de fazer scroll no iframe, utilize o atributo scrolling="no" que é suportado no HTML4, juntamente com a propriedade overflow para suportar o HTML5:

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

Se o plano é ocultar a barra de rolagem mas ainda assim ter a habilidade de fazer scroll, podes adicionar um elemento parent com o mesmo width do iframe, menos (aproximadamente) o tamanho da largura da scrollbar, dependendo do navegador.

Se o iframe estiver hospedado no seu servidor que é o que parece ser o caso, isto ainda poderá ser melhor ajustado adicionando um padding-right originalmente no documento fonte a ser apresentado no iframe e depois voltar aqui a ajustar aqui o valor width do elemento 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>

Ainda adicionalmente

Se o ficheiro estivesse a ser apresentado de outra forma que não fosse iframe, por exemplo ser injetado via Ajax, ainda poderíamos ter uma abordagem mais inteligente e definir um valor para a largura do elemento parent calculando a largura do documento a ser apresentado, menos a largura do scrollbar, com Javascript da seguinte forma:

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

se.style.width = calcW;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .