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

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