5

Gostaria de esconder essas duas barras (Vertical e Horizontal), configurei meu arquivo .css com as definições abaixo, mas não estão funcionando:

@charset "UTF-8";

section#conteudo{
  width: 1000px;
  margin:  auto;
}

iframe#frameEspecificacoes{
  width: 400px;
  height: 280px;
  border: none;
  overflow: hidden;
}

iframe#frameEspecificacoes::-webkit-scrollbar { 
  display: none;
}

inserir a descrição da imagem aqui

7
  • Tentaste usar overflow: hidden;? 20/02/2017 às 13:02
  • É o que estou usando em iframe#frameEspecificacoes. E não dá certo.
    – MagShania
    20/02/2017 às 13:05
  • O elemento que contêm o iframe tem que ter o overflow:hidden tambem 20/02/2017 às 13:06
  • Não funcionou, acabei de adicionar...
    – MagShania
    20/02/2017 às 13:08
  • Verifica qual elemento está com as barras de rolagem, pois certamente não é o iframe, como Section tem largura de 1000px verifica se o elemento Pai do Section não é o que está estourando. 20/02/2017 às 13:12

2 Respostas 2

6

É necessário verificar qual elemento está estourando, ou seja, tendo sua largura/altura excedida pelo tamanho do conteúdo, e aplicar overflow: hidden; a esse elemento:

body {
	overflow: hidden;
}

section#conteudo{
	width: 1000px;
	margin: auto;
	overflow: hidden;
}

iframe#frameEspecificacoes{
  background: #AAA;
	width: 400px;
	height: 280px;
	border: none;
	overflow: hidden;
}

iframe#frameEspecificacoes::-webkit-scrollbar { 
	display: none;
}
<section id="conteudo">

<iframe id="frameEspecificacoes"></iframe>

</section>

1
  • Não está estourando, acredito eu, porque o width está em 900px, do conteúdo restante da página, olhando melhor o que me parece está acontecendo é o não reconhecimento do ::-webkit-scrollbar, que o código fica com cor branca, como se não estivesse sendo reconhecido. Será?
    – MagShania
    20/02/2017 às 18:01
3

Boa noite galerinha, fiz esse curso e passei pelo mesmo problema, já dei uma resposta aqui no fórum para incluir <iframe scrolling="no"> na página specs.html.

Hoje vim dar a resposta ainda melhor, a solução "semanticamente correta" que é insirir

body {
overflow-x: hidden;
overflow-y: hidden;
}

no css da página google-glass.html.

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 .