Ocultar barra de rolagem horizontal em um iframe?

110

Preciso ocultar a barra de rolagem horizontal em um iframe usando css, jquery ou js.

— nkcmr
fonte

1

possível duplicata: Safari / Chrome (Webkit) - Não é possível ocultar a barra de rolagem vertical do iframe e outros

— Matt Ball

iframe não está no mesmo domínio que a página pai.

— nkcmr

overflow-y: oculto; Não funciona no Google Chrome, Safari e Opera. Experimente com jsfiddle.net/m5Btd/3

— phangia2712

208

Eu sugiro fazer isso com uma combinação de

CSS overflow-y: hidden;
scrolling="no" (para HTML4)
~~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