Escondendo a barra de rolagem vertical e horizontal com jQuery e CSS

by Stiven 17. março 2010 10:41

Hoje pra variar foi mais um dia de descepção com o browser Internet Explorer, seja ela qualquer versão. Eu precisava esconder as barras de rolagens (vertical e horizontal) usando o jQuery. Parecia algo tão simples que bastava colocar os trechos de código abaixo:

        //Esconder
        $('body').css('overflow-y', 'hidden');
        $('body').css('overflow-x', 'hidden');

        //Mostrar
        $('body').css('overflow-y', '');
        $('body').css('overflow-x', '');

Então vamos lá! Como desenvolvo minha aplicações no Chrome, funcionou perfeitamente. Testei no FireFox, Safira...show!!!!!!! Mas quando fui testar no IE, aí veio o problema. Como contornar o problema?

É simples...vamos pegar então a propriedade scroll do objeto body e manipula-la.

Esconder

        //FireFox, Chrome, Safari
        $('body').css('overflow-y', 'hidden');
        $('body').css('overflow-x', 'hidden');
       
        //IE, FireFox
        $('body').attr('scroll', 'no');

Mostrar

        //FireFox, Chrome, Safari
        $('body').css('overflow-y', '');
        $('body').css('overflow-x', '');
       
        //IE, FireFox
        $('body').attr('scroll', 'auto');

É isso aí... mais uma vez vimos que o IE nos faz escrever mais linhas de código.

Tags: ,

CSS | JQuery

Comentar




  Country flag
biuquote
  • Comentário
  • Pré-visualização
Loading


Sobre o autor



Meu nome é Stiven Fabiano da Câmara e sou desenvolvedor de software especializado na plataforma .NET da Microsoft, utilizando a linguagem Visual C#.