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

Respostas:

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