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

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.

— 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