Desativar rolagem no corpo

137

Gostaria de desativar completamente a rolagem no HTML body. Eu tentei as seguintes opções:

  • overflow: hidden; (não está funcionando, não desativou a rolagem, apenas ocultou a barra de rolagem)

  • position: fixed; (funcionou, mas rolou completamente para o topo, o que é inaceitável para este aplicativo específico)

Não consegui encontrar alternativas para essas duas opções, existem mais?

html css scroll Micha Wiedenmann
fonte
3
para qual elemento você aplicou overflow: hidden?
Sajad Karuthedath
O que exatamente você está tentando alcançar aqui? Qual é o seu objetivo final?
Jbutler483
2
A exibição de código relevante tornará mais fácil ajudá-lo.
Sleek Geek
1
estouro: oculto; é o caminho a percorrer. Se não estiver funcionando, você tem algum outro problema no seu css. Tente html, body {overflow: hidden;} se isso não funcionar, tente * {overflow: hidden;} e tentar descobrir o que está errado
Jonas Grumann

Respostas:

245

Conjunto heighte overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

pantera
fonte
3
esqueceu "html", antes de "corpo.
2
Não está funcionando no iOS quando você tem um elemento de sobreposição com posição fixa.
notQ
1
Você pode simplesmente adicionar o "overflow": "hidden" e ele funcionará bem.
JPG
Essa solução não funcionou imediatamente para mim, mas após a inspeção, a "margem" estava sendo substituída em algum lugar. Definir a "margem: 0" desse elemento fez o truque.
joaoprib 20/06
19

CSS CSS funciona bem se a tag body não faz nada que você possa escrever também

<body scroll="no" style="overflow: hidden">

Nesse caso, a substituição deve estar na etiqueta corporal, é mais fácil de controlar, mas às vezes causa dores de cabeça.

Lalo
fonte
21
Isto não é HTML5 válido
mbomb007 30/01
@ mbomb007 Você pode comentar sobre o erro aqui relacionado ao HTML5?
Ethan
5
@ Ethan O scrollatributo não é válido na <body>tag. Não está listado como válido em nenhuma especificação que eu possa encontrar. w3schools ; MDN ; Quackit
mbomb007 21/02/19
14

Esta postagem foi útil, mas apenas queria compartilhar uma pequena alternativa que pode ajudar outras pessoas:

Definir em max-heightvez de heighttambém serve. No meu caso, estou desativando a rolagem com base em uma alternância de classe. Definir .someContainer {height: 100%; overflow: hidden;}quando a altura do contêiner é menor que a da viewport esticaria o contêiner, o que não seria o que você desejaria. Definir max-heightcontas para isso, mas se a altura do contêiner for maior que a da janela de visualização quando o conteúdo for alterado, ainda desabilitará a rolagem.

joebjoe
fonte
isso salvou meu dia para navegadores de desktop sem efeito colateral indesejado de scroll-top-top. mas não funcionou em navegadores móveis (iphone5s e android).
bob
5

Para fazer isso, adicione 2 propriedades CSS no <body>elemento

body {
   height: 100%;
   overflow-y: hidden;
}

Atualmente, existem muitos sites de notícias que exigem que os usuários criem uma conta. Normalmente, eles dão acesso total à página por cerca de um segundo e, em seguida, mostram um pop-up e impedem que os usuários rolem para baixo.

O telégrafo

bvdb
fonte
isso oculta a barra de rolagem. No entanto, a pergunta está especificamente pedindo uma alternativa para ocultar a barra de rolagem
DataGeek
@DataGeek, isso não apenas oculta a barra de rolagem, mas também interrompe a capacidade de rolar para baixo. E, pelo que entendi, foi o que foi pedido. ou seja, não apenas ocultando, mas também impossibilitando a rolagem para baixo.
bvdb