Tirar Barra de rolagem Horizontal ou Vertical de Iframe

Tirar Barra Horizontal ou Vertical de Iframe

As vezes precisamos deixar somente uma barra de rolagem em nosso frame ou iframe, seja ela horizontal ou vertical, o problema é que isso não é tão simples como deveria ser, então resolvi criar este artigo para mostrar algumas idéias para resolver essa situação.

Para satisfazer várias necessidades, vejamos como proceder em situações adversas:

Ocultar as barras de rolagem do iframe
Para ocultar as barras basta inserir a propriedade scrolling=no na tag do iframe, veja o código abaixo:

<iframe src='#' scrolling='no'></iframe>

Isso fará o iframe não exibir nenhuma barra de rolagem, mesmo quando necessário.

Barras de Rolagem do Iframe Automáticas
Para as barras de rolagem aparecerem somente quando necessário, basta configurar a propriedade scrolling=auto, veja o código:

<iframe src='#' scrolling='auto'></iframe>

Agora o iframe somente irá exibir as barras de rolagem quando for necessário.

Exibir somente barra de rolagem horizontal do iframe
O código abaixo, pelos meus testes, só funcionou no firefox:

<iframe src="#" style="overflow-x:hidden; overflow-y:scroll"></iframe>

Exibir somente barra de rolagem vertical do iframe
O código abaixo, pelos meus testes, só funcionou no firefox:

<iframe src="#" style="overflow-x:scroll; overflow-y:hidden"></iframe>

Agora, uma alternativa curiosa que encontrei para exibir somente a barra de rolagem vertical ou horizontal é trabalhar com dois iframes, sendo que o iframe da pagina principal deve ter uma dimensão menor no lado que você não quer que seja exibido a barra de rolagem. Por exemplo, vamos supor que eu tenha uma página chamada index.html com um iframe que abre o site profissionais.ws, nesse caso, você cria outra página chamada index2.html e coloca o mesmo iframe. Após isso, no iframe da página index.html você altera a propriedade src para index2.html, isso fará o iframe abrir a página index2.html que irá abrir o site profissionais.ws.

Agora, no iframe index.html você diminui o width ou o height para que não apareça as barras do iframe da página index2.html. Outro detalhe é configurar o iframe da página index.html com a propriedade scrolling=”no” e no iframe da página index2.html scrolling=”auto”.

Vejam como ficaria o código do index.html, supondo que queremos exibir somente a barra de rolagem vertical:

<iframe src="index2.html" width="650" height="790"  frameborder="0" align="center" scrolling="no" ></iframe>

E também o código do index2.html:

<html>
<body style="margin:0;padding:0;">
<iframe src="http://fazer-site.net" width="645" height="810" scrolling="yes"  frameborder="0" align="cente" style="overflow-x:hidden; overflow-y:scroll"></iframe>
</body>
</html>

Entenderam a idéia? Testei aqui e, bem configurado, funcionou no Firefox, Iexplore e Chrome, que são os navegadores web que tenho instalado em meu computador no atual momento.

Fica aí a dica, até o próximo artigo aqui no Profissionais Web

3 respostas a Tirar Barra de rolagem Horizontal ou Vertical de Iframe

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *