Ocultar barra de rolagem horizontal em um iframe?

Respostas:

208

Eu sugiro fazer isso com uma combinação de

  1. CSS overflow-y: hidden;
  2. scrolling="no" (para HTML4)
  3. e seamless="seamless"(para HTML5)*

* O seamlessatributo foi removido do padrão e nenhum navegador o suporta.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Expandir trecho

Chase Florell
fonte
9
Carreguei seu exemplo no Chrome 15 e ainda vejo as barras de rolagem.
Dan
61
Adicionar o scrolling="no"atributo ao iframe parece remover as barras de rolagem no Chrome.
Nick
2
@Nick Não o remove do Chrome, pelo menos no meu computador. img339.imageshack.us/img339/6685/chromelj.png
l46kok
1
@ l46kok sua captura de tela não incluiscrolling="no"
Chase Florell
3
Observe que o atributo parece não é atualmente compatível com nenhum dos principais navegadores . caniuse.com/#feat=iframe-seamless
Liyali
26

definir o scrolling="no"atributo em seu iframe.

Rahul Dadhich
fonte
15

Se você tiver permissão para alterar o código do documento dentro de seu iframee esse conteúdo estiver visível apenas na janela pai, basta adicionar o seguinte CSS em iframe:

body {
    overflow:hidden;
}

Aqui está um exemplo muito simples:

http://jsfiddle.net/u5gLoav9/

Esta solução permite que você:

  • Mantenha seu HTML5 válido, pois não precisa de scrolling="no"atributo no iframe(este atributo no HTML5 foi descontinuado).

  • Funciona na maioria dos navegadores que usam overflow CSS : oculto

  • Nenhum JS ou jQuery necessário.

Notas:

Para proibir barras de rolagem horizontalmente, use este CSS:

overflow-x: hidden;
GibboK
fonte
2

Essa resposta só se aplica a sites que usam Bootstrap. O recurso de incorporação responsiva do Bootstrap cuida das barras de rolagem.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Razan Paul
fonte