Remover barra de rolagem do iframe

117

Usando este código

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

É assim que parece (a caixa de mensagens na página inicial de http://www.talkjesus.com )

Como removo a barra de rolagem horizontal e modifico o css da barra de rolagem vertical?

html css iframe

— Fé em coisas invisíveis
fonte

2

duplicar com stackoverflow.com/questions/4856746/… que tem uma resposta melhor

— Daniël Tulp

9

em seu css:

iframe{
    overflow:hidden;
}

— Takien
fonte

7

Obrigado, mas apenas a rolagem horizontal e ainda aparece no Firefox. Não aparece no Chrome nem no IE. Além disso, o CSS para barra de rolagem é aplicado efetivamente apenas no IE, não no FF nem no Chrome (o último mostra cores / tons bege de aparência padrão).

— Fé nas coisas invisíveis,

3

Isso não funcionará porque o estouro ocorre no documento iframe, que geralmente não é possível modificar devido às restrições de segurança do iframe entre domínios.

— thdoan

54

Isso não funciona, pois não afetará o conteúdo do iframe, apenas o próprio iframe. A solução é scrolling = "no".

— TheLD

4

Esta é uma resposta incorreta, não remove as barras de rolagem no google chrome, mas scrolling = "no" sim.

— Anders Lindén

@LarsVandeDonk Sua resposta deve ser a solução correta.

— Wong Jia Hau

313

Adicione o scrolling="no"atributo ao iframe.

— PROSPERAR
fonte

1

capaz de fazer isso com css?

— Evorlor

1

Sim, mas no Chrome não é possível usar scrollIntoView. Consulte code.google.com/p/chromium/issues/detail?id=137214

— Peter Brand

1

bem, isso oculta a barra de rolagem do conteúdo e evita a rolagem do conteúdo. não impede que a barra de rolagem do iframe apareça.

— Dave Cousineau

3

O atributo de rolagem no iframe agora está oficialmente obsoleto. CSS deve ser usado em seu lugar.

— Mike Poole

4

@MikePoole Pode estar oficialmente obsoleto, mas não ajudou a configuração overflow:hidden;no Chrome 65.0.3325.181, mas scrolling="no"ajudou.

— cerca de

28

Isso funciona em todos os navegadores. jsfiddle aqui http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

— Thyagarajan C
fonte

21

Adicionando scroll="no"e style="overflow:hidden"em iframe não funcionou, eu tive que adicionar style="overflow:hidden"no corpo do documento HTML carregado dentro iframe.

— nirvana74v
fonte

1

Se isso ajudar, há um problema no Firefox, onde se você tiver um elemento CSS transform: scale(0.7)ou algo semelhante, isso criará barras de rolagem (que aparecerão no seu iFrame), a menos que você o corte com overflow: hidden;um ancestral (pode ser um div em vez de corpo).

— WraithKenny

8

Isso porque é 'scrolling = no', não 'scroll = no'.

— Bryan Green

quer dizer carregado dentro de nosso carregado por aí? O que está em volta do quê?

— João Pimentel Ferreira

carregado dentro de <iframe src = "/ test.html"> onde test.html tem esta configuração.

— nirvana74v

16

Experimente adicionar scrolling="no"atributos como abaixo:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Expandir trecho

— Allabux B
fonte

11

Basta adicionar scrolling="no"e seamless="seamless"atributos à tag iframe. como isso:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

— Nima Rahbar
fonte

13

O atributo seamless foi removido do HTML .

— neopickaze

Você deve usar css em vez de atributo transparente.

— Nima Rahbar

@NimaRahbar O atributo seamless pode estar obsoleto, mas css não suporta parâmetros iframe.

— Carrinho abandonado em

9

Se alguém aqui está tendo problemas para desativar as barras de rolagem no iframe, pode ser porque o conteúdo do iframe tem barras de rolagem nos elementos abaixo do htmlelemento!

Alguns esquemas definido htmle bodya altura de 100%, e usar um #wrapperdiv com overflow: auto;(ou scroll), movendo desse modo o deslocamento para o #wrapperelemento.

Nesse caso, nada que você faça impedirá que as barras de rolagem apareçam, exceto editar o conteúdo da outra página.

— WraithKenny
fonte

8

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Use o div acima e não exibirá a barra de rolagem em nenhum navegador.

— KnightFury
fonte

3

seamlessatributo não é HTML5 válido, não é compatível com a maioria dos navegadores ( caniuse.com/#search=seamless ) e a maioria dos outros estilos são desnecessários.

— Pere

8

Adicione isso em seu css para ocultar a barra de rolagem

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

— Deepika Patel
fonte

6

Este é o último recurso, mas vale a pena mencionar - você pode usar o ::-webkit-scrollbarpseudo-elemento no iframepai do para se livrar das famosas barras de rolagem dos anos 90.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Editar: embora seja relativamente compatível , ::-webkit-scrollbarpode não se adequar a todos os navegadores. Use com cuidado :)

— DotBot
fonte

2

Esta é a única resposta que me ajudou. Você ainda pode rolar, mas não vê a barra de rolagem feia. Obrigado!

— Karmidzhanov

4

Adicione isso em seu css para ocultar apenas a barra de rolagem horizontal

iframe{
    overflow-x:hidden;
}

— Abhidev
fonte

3

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

Assim, você torna a largura do Iframe maior do que deveria. Em seguida, você oculta a barra de rolagem horizontal com overflow-x: hidden.

— Nico Grill
fonte