Como tirar scrollbar pelo CSS?

Por AlexandreKG, 22 de março de 2017 em Programação web

 AlexandreKG

 Membros Plenos
  32
 61 posts
 desde 07/02/2017
 Porto Alegre/RS

Meu PC 
Meu Smartphone 

 #1  

Postado 22 de março de 2017

Boa tarde galera, eu estou fazendo o curso de HTML5/CSS3 do Gustavo
Guanabara, do canal Cursoemvideo. Estava dando tudo certo, porém agora estou
com um problema.
 
Eu estou usando um iframe, que quero tirar as scrollbars, para que eu posso linkar
um href com o conteudo do iframe depois, porém não está funcionando:

Note que há scrollbar tanto x quanto y.

 
Meu código HTML:
<iframe id="frame-spec" src="google-glass.html"
name="janela"></iframe>
CSS:
iframe#frame-spec {
width: 380px;
height: 280px;
border: none;
overflow: hidden;
}

iframe#frame-spec::-webkit-scrollbar {
display: none;
}
Estou usando o navegador Google Chrome, pelo que vi este código display:none;
é para este navegador. Mas mesmo assim não está funcionando.
 
   1

 JonathanMMachado

 Membros Plenos
  28
 55 posts
 desde 03/12/2014
 Joiville/SC

 Hollywood Jack
Offline

 #2  

Postado 22 de março de 2017

Posso estar falando besteira, mas espero que não rsrs, mas pelo que sei não
daria, pois as barras estão aí porque o conteúdo dentro do iframe, é maior do que
o espaço que você reservou pra ele. Por exemplo, se eu seto o width e height do
iframe em 100px, e o conteúdo que vai dentro for de 150x150px, ele vai fazer uma
barra para mostrar os 50px "invisíveis".

Novamente, pelo que conheço de iframe, é assim que funciona. Mas caso
encontre alguma outra solução comente aqui, seria interessante conhecer.

 DiF

 Moderadores


  4.939
 14.317 posts
 desde 17/04/2007
 Pelotas - RS

Meu PC 
Meu Notebook 
Meu Smartphone 


 DiF
Offline

 #3  

Postado 22 de março de 2017

@AlexandreKG Experimente colocar o scrolling="no" no iframe
 
<iframe scrolling="no" id="frame-spec" src="google-
glass.html" name="janela"></iframe>
E com css
iframe { overflow:hidden; }
Só devo lembra-lo que o iframe é um elemento obsoleto.
  3

 AlexandreKG
  Autor do tópico


 Membros Plenos
  32
 61 posts
 desde 07/02/2017
 Porto Alegre/RS

Meu PC 
Meu Smartphone 

 #4  

Postado 23 de março de 2017

  Em 22/03/2017 às 13:29, DiF disse:
@AlexandreKG Experimente colocar o scrolling="no" no iframe
 

<iframe scrolling="no" id="frame-spec" src="google-

glass.html" name="janela"></iframe>
E com css

iframe { overflow:hidden; }
 Só devo lembra-lo que o iframe é um elemento obsoleto.
Usando esse atributo na tag iframe, eu posso usar um mapa de imagem depois, e
selecionar determinado artigo do iframe? Mesmo eu ter tirado a scrollbar pelo
HTML e não pelo CSS?
 
@Edit
 
Sim, eu consigo definir um artigo específico do arquivo, muito obrigado 

  2

 Robson Gaspar

 Membros Juniores
  0
 1 post
 desde 30/03/2017
 Rio de Janeiro

 #5  

Postado 30 de março de 2017

@AlexandreKG , estou fazendo o mesmo curso que você e me deparei com o
mesmo problema. Pelo que vi aqui foi resolvido utilizando o scrolling=no no
próprio HTML. Ficou assim mesmo ou você conseguiu outro meio? Um abraço.

 men10jr

 Membros Juniores
  0
 1 post
 desde 05/07/2017
 Morada Nova

 #6  

Postado 5 de julho de 2017

  Em 30/03/2017 às 12:05, Robson Gaspar disse:
@AlexandreKG , estou fazendo o mesmo curso que você e me deparei com o
mesmo problema. Pelo que vi aqui foi resolvido utilizando o scrolling=no no
próprio HTML. Ficou assim mesmo ou você conseguiu outro meio? Um abraço.
@Robson Gaspar Deu certo. valeu!
  Gabriel Guarini

 Membros Juniores
  0
 1 post
 desde 15/07/2017

 #7  

Postado 15 de julho de 2017

@DiF Então qual seria uma solução para obter o mesmo resultado ?

 Damiano de Lima

 Membros Juniores
  0
 1 post
 desde 25/11/2017

 #8  

Postado 25 de novembro de 2017

Tem duas soluções que podem ser utilizadas, a primeira é
utilizando scrolling="no" como já foi dito, ou utilizando overflow :
hidden; diretamente no css do arquivo google-glass.html, fica assim:
body {
            font-family: Arial;
            font-size: 10pt;
            overflow : hidden; 
        }
Tanto uma como a outra forma funcionam, valeu.

 Luiz Gustavo Camargo


 Membros Juniores
  0
 1 post
 desde 13/12/2017
 

 #9  

Postado 13 de dezembro de 2017

Muito obrigado !! Mesmo curso, mesmo problema e solução compatível ! 

 Siane Leal

 Membros Juniores
  0
 1 post
 desde 26/03/2018

 #10  

Postado 26 de março de 2018

Ótimas dicas, estava com o mesmo problema no curso do Guanabara. Obrigada
pessoal!!

 Pablue

 Membros Juniores
  0
 1 post
 desde 18/07/2018

 #11  

Postado 18 de julho de 2018

  Em 22/03/2017 às 13:29, DiF disse:
@AlexandreKG Experimente colocar o scrolling="no" no iframe
 

<iframe scrolling="no" id="frame-spec" src="google-

glass.html" name="janela"></iframe>
E com css
 iframe { overflow:hidden; }
Só devo lembra-lo que o iframe é um elemento obsoleto.
Grato pela dica.
Configurando pelo html deu certo. Já pelo CSS não teve acordo. Nenhum
navegador aceitou a "iframe {overflow:hidden;}"

 Patrícia De Menezes Barbosa


 Membros Juniores
  0
 1 post
 desde 03/08/2018

 #12  

Postado 3 de agosto de 2018

Boa noite Pessoa!
 
o problema desta questão e que, deveríamos conseguir fazer a  rolagem  no
arquivo mesmo com a barra oculta, pelo no google Chrome, mas isso nao
acontece, esta tendo alguma incompatibilidades com os códigos scrolling="no" ou
iframe#frame-spec::-webkit-scrollbar{ display: none;} . Objetivo era ocultar a barra
de rolagem, mas consegui fazer a rolagem dos documentos.  Estou fazendo este
curso também e passando por este problema.
 

 Patrícia Mendes P S

 Membros Juniores
  1
 1 post
 desde 16/12/2019

 #13  

Postado 16 de dezembro de 2019

@DiF mesmo problema aqui, mas essa solução funcionou:
<iframe scrolling="no" id="frame-spec" src="google-
glass.html" name="janela"></iframe>
E com css
iframe { overflow:hidden; }
Obrigada

Como ocultar a barra de rolagem do

iframe?
Faça uma pergunta

Perguntada 2 anos, 6 meses atrás

Ativa 1 mês atrás

Vista 6mil vezes

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>
html   css   iframe

compartilharmelhorar esta pergunta

editada 18/09/17 às 8:45
Chun

7.06533 medalhas de ouro2323 medalhas de prata5353 medalhas de bronze

perguntada 18/09/17 às 6:17

Vinícius Vedovotto

122 medalhas de prata66 medalhas de bronze

comentar

1 Resposta
Ativos OldestVotos

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

Expandir trecho de código

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

Expandir trecho de código

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;