Executando verificação de segurança...
1
aledev
1 min de leitura ·

Me ajude com uma dúvida em HTML/CSS? <3

Estou fazendo uma aula, porém, elas foram gravadas a muitos anos, acredito que muitas tags e atributos já não funcionam mais.

O problema é o seguinte:

Em html eu tenho as seguintes linhas de códigos para um iframe:
< iframe id="framespec" src="./exemplo-arquivo-iframe.html" name="janela">
< /iframe>

E eu quero fazer com que a barra de scrolling, tanto a vertical quanto a horizontal não apareçam, mas mantenham a sua funcionalidade.

No CSS minhas linhas de código estão da seguinte forma:
iframe#framespec {
width: 395px;
height: 280px;
border: none;
overflow: hidden;
}

Eu já tentei utilizar o acent(acho que é assim que fala) "scrolling:no;" mas não funcionou.
Também tentei utilizar o "-webkit-scrollbar" e também não funcionou.

Quero muito aprender isso, mas já busquei vários tutoriais, e já apelei até pra ChatGPT (risos) e nada :'(

Carregando publicação patrocinada...
2
italo91206

Oi. Na verdade o que você está procurando é o atributo display: none.
Teoricamente o seletor CSS precisaria contê-lo:

#framespec {
    width: 395px;
    height: 280px;
    border: none;
}
#framespec::-webkit-scrollbar{
  display: none;
}

Importante: não inclua o overflow: hidden caso contrário ele não ativará o efeito do scroll.

1
1
1
aledev
Autor
Autor

CÓDIGO HTML

< !DOCTYPE html>
< html lang="pt-br">

< head>
< meta charset="UTF-8"/>
< title>Tudo sobre GoogleGlass< /title>
< link rel="stylesheet" href="./style.css" />
< ink rel="stylesheet" href="./_css/specs.css"/>

< /head>

< script type="text/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
< ul>
< 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
< 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 Alexandre Marinho< /h2>
< h3 class="direita">Atualizado em Fev/2023< /h3>
< /hgroup>
< /header>

    < p>TEXTO< /p>

< section id="conteudo">
< img src="./_imagens/glass-esquema-marcado.jpg" usemap="#meumapa"/>
< map name="meumapa">
< area shape="rect" coords="176,206, 272, 253" href="./google-glass.html#tela" target="janela"/>
< area shape="circle" coords="156,243,11" href="./google-glass.html#camera" target="janela"/>
< area shape="circle" coords="75,50,12" href="./google-glass.html#gadgets" target="janela" />
< area shape="poly" coords="27,145,81,214,83,250,26,169" href="./google-glass.html#sensores" target="janela"/>
< /map>
< iframe id="framespec" src="./google-glass.html" name="janela">
< /iframe>

< /section>
< /article>
< /section>

< footer id="rodape">
< p>Copyright 2023 - by Alexandre Marinho

< a href="http://facebook.com/alexandre.marinhoii/" target="_blank"> Facebook< /a> |
< a href="http://twitter.com/xandeplay"target="_blank"> Twitter< /a>< /p>
< /footer>
< /div>
< /body>
< /html>

1
1
aledev
Autor
Autor

Excelente o site, eu testei todas as aplicações, acho que provavelmente é um erro no meu código, mas não faço ideal de qual seja, porque não é possível nenhuma opção de esconder o scroll funcione.
Tentei estilizar no css o background color:transparent, e nada aconteceu :/

1
costaguilherme

Você tem que estilizar a scrollbar do arquivo exemplo-arquivo-iframe.html.
Lembre-se de que o seu iframe está renderizando um conteúdo externo, logo as barres de rolagem não são do iframe, mas sim da página que está sendo renderizada.
Se não for possível estilizar a scrollbar da página externa, então não tem o que fazer.