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 :'(
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.
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 < h2>A revolução do Google está chegando < /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>
Você pode estilizar a scrollbar colocando um background transparent. Da uma lida aqui. https://www.digitalocean.com/community/tutorials/css-scrollbars