Desative as barras de rolagem verticais e horizontais dos navegadores

117

É possível desabilitar as barras de rolagem vertical e horizontal do navegador usando jQuery ou javascript?

javascript jquery naveen
fonte
Acho que em algumas situações, especialmente se você deseja alternar entre rolar e não rolar, essa solução é mais preferível: stackoverflow.com/questions/8701754/…
Yousef Salimpour
Você pode encontrar uma resposta mais completa para esta pergunta aqui stackoverflow.com/a/25561646/1922144
davidcondrey

Respostas:

144

No caso de você precisar da possibilidade de ocultar e mostrar as barras de rolagem dinamicamente, você pode usar

$("body").css("overflow", "hidden");

e

$("body").css("overflow", "auto");

em algum lugar do seu código.

Alexander Prokofyev
fonte
4
O overflow hidden nem sempre funciona no IE. Veja a resposta de AnthonyWJones abaixo.
Tiago Almeida
4
oveflow: hiddennão impedirá nada em smartphones.
dvlden
No cromo, isso desativa a barra de rolagem sem ocultá-la (ela ainda está lá e ainda mudando o tamanho de tudo o mais, mas agora está acinzentada)
taltamir
120 
function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}
Lyncee
fonte
5
Dois votos positivos são notavelmente pequenos por serem a única resposta em javascript puro.
Fzs2
2
@HermannIngjaldsson: Ver OP pediu uma solução JavaScript ou jQuery e aceitou uma solução jQuery 4 anos atrás, só faz sentido. Não estou dizendo que a resposta não seja boa, apenas afirmando o óbvio sobre os votos mais baixos. +1 de mim de qualquer maneira.
Não,
esta é a única solução que funcionou para mim, uma vez que o overflow oculto do corpo não ataca todo o documento, esta é a solução certa para este problema! muito obrigado, você me economizou muito tempo!
Adnane.T,
Esta é uma solução brilhante e merece um voto positivo. Ele também resolve o problema com css fixo, onde a página será rolada para o topo.
haipham23
50

Experimente CSS

<body style="overflow: hidden">
Ray Lu
fonte
15
Para compatibilidade do navegador, eu adicionaria este estilo à tag HTML também: html, body {overflow: hidden;}
Ady
32

Até agora temos overflow: escondido no corpo. No entanto, o IE nem sempre honra isso e você precisa colocar scroll = "no" no elemento body e / ou colocar overflow: hidden no elemento html também.

Você pode levar isso adiante quando precisar 'assumir o controle' da porta de visualização, você pode fazer o seguinte: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Um elemento com altura de 100% no corpo tem a altura total da janela de visualização e o elemento posicionado absolutamente usando bottom: nnPX será definido nn pixels acima da borda inferior da janela, etc.

AnthonyWJones
fonte
2
não faz o ',' deveria ser ';', no css do corpo?
paynestrike de
12

Experimente CSS.

Se você deseja remover o Horizontal

overflow-x: hidden;

E se você quiser remover o Vertical

overflow-y: hidden;
Shafraz
fonte
10

Em versões modernas do IE (IE10 e superior), as barras de rolagem podem ser ocultadas usando a -ms-overflow-stylepropriedade .

html {
     -ms-overflow-style: none;
}

No Chrome, as barras de rolagem podem ser estilizadas:

::-webkit-scrollbar {
    display: none;
}

Isso é muito útil se você quiser usar a rolagem do corpo 'padrão' em um aplicativo da web, que é consideravelmente mais rápido do que overflow-y: scroll.

Lg102
fonte
apenas isso funcionou para mim em todas as respostas :) obrigado!
Gediminas
9

Caso você também precise de suporte para Internet Explorer 6, basta estourar o html

$("html").css("overflow", "hidden");

e

$("html").css("overflow", "auto");
Gawin
fonte
5

O IE tem algum bug com as barras de rolagem. Portanto, se você quiser um dos dois, deve incluir o seguinte para ocultar a barra de rolagem horizontal:

overflow-x: hidden;
overflow-y:scroll;

e para ocultar vertical:

overflow-y: hidden;
overflow-x: scroll;

Zeeshan Ali
fonte
4

(Ainda não posso comentar, mas gostaria de compartilhar):

O código de Lyncee funcionou para mim no navegador de desktop. No entanto, no iPad (Chrome, iOS 9), travou o aplicativo. Para consertar, mudei

document.documentElement.style.overflow = ...

para

document.body.style.overflow = ...

que resolveu meu problema.

Erasmus Cedernaes
fonte
2

Porque o Firefox tem uma seta tecla de atalho, você provavelmente vai querer colocar um <div>em torno dele com estilo CSS: overflow:hidden;.

Qvcool
fonte
2

Usando JQuery, você pode desativar a barra de rolagem com este código: 

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Além disso, você pode habilitá-lo novamente com este código:

 $('body').unbind('mousewheel');
gtzinos
fonte