CSS Como tirar scrollbar pelo CSS?

[AlexandreKG]

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.

 

[JonathanMMachado]

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]

@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.

[AlexandreKG]

5 horas atrás, 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

[Robson Gaspar]

@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]

Em 30/03/2017 às 16: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]

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

[Damiano de Lima]

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]

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

[Siane Leal]

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

[Pablue]

Em 22/03/2017 às 16: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]

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]

@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

[Gustavo Aquino]

tenta isso no css mano.

body{height:100%;width:100%;overflow:hidden;}