Overflow-x: hidden não impede que o conteúdo seja excedido nos navegadores móveis

142

Eu tenho um site aqui .

Visualizada em um navegador de desktop, a barra de menus preta se estende adequadamente apenas até a borda da janela, uma vez que bodypossui overflow-x:hidden.

Em qualquer navegador móvel, seja Android ou iOS, a barra de menus preta exibe toda a sua largura, o que traz espaço em branco à direita da página. Até onde eu sei, esse espaço em branco não faz parte das tags htmlou body.

Mesmo se eu definir a viewport para uma largura específica no <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

O site se expande para o 1100px, mas ainda possui o espaço em branco além do 1100.

o que estou perdendo? Como mantenho a viewport para 1100 e corto o excesso?

— Indigenuity
fonte

1

Isso é especialmente um problema no iOS9

— Chuck Le Butt

269

Criar uma div de wrapper de site dentro <body>e aplicar o overflow-x:hiddenao wrapper em vez de <body>ou <html>corrigiu o problema.

Parece que os navegadores que analisam a <meta name="viewport">tag simplesmente ignoram overflowatributos nas tags htmle body.

Nota: Você também pode precisar adicionar position: relativeà div do wrapper.

— Indigenuity
fonte

44

Descobri que além de definir o overflowque hidden, eu tinha que definir o positionque fixed...

— Victor S

16

Adicionar posição ao fixo me impede de rolar!

— Página

5

Eu tentei, coloquei todo o meu código dentro de uma div e dou a ela overflow-x: hidden, mas não funciona, adiciono <meta name = "viewport" content = "width = device-width, inicial-scale = 1"> também, mas nada mudou: / alguma idéia?

4

O @leepowers overflow-x: hiddenainda não está funcionando para mim, mesmo depois de adicionar essa meta tag. Você poderia compartilhar um link para o seu site em que está trabalhando?

— jupiteror

3

Ei, galera, quando eu achei que position:relativefunciona também.

— Thomas Valadez

80

experimentar

html, body {
  overflow-x:hidden 
}

em vez de apenas

body {
  overflow-x:hidden 
}

— subaracnídeo
fonte

7

Obrigado, mas a aplicação de overflowqualquer coisa para htmle / ou bodyem qualquer combinação não resolveu o problema.

— Indigenuity

Desculpe que não deu certo para você. Antes de responder, fiz um teste rápido usando seu site e aplicando minha sugestão ao seu css. Foi corrigido o problema do navegador padrão e do golfinho no meu telefone Android, pelo menos.

— Subaracnídeo

3

Trabalhou para mim. eduardd.eu/projects/ezo (entre 480 e 992px rodapé teve um problema com essa imagem transbordando da mulher e toalhas)

— Eduard

2

Alguém sabe por que isso funciona, quando especificar corpo {} e html {} separadamente não?

— hamncheez

1

height:100%;Também é necessário adicionar , caso contrário, a rolagem vertical não funcionaria corretamente em páginas com carregamento de imagens (que aumentam a altura da página).

— Arno van Oordt

69

O comentário de VictorS sobre a resposta aceita merece ser sua própria resposta, porque é uma solução muito elegante que realmente funciona. E vou adicionar um pouco à sua utilidade.

Victor observa adicionando position:fixedobras.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

E de fato faz. No entanto, ele também tem um leve efeito colateral de rolar para o topo. position:absoluteresolve isso, mas reintroduz a capacidade de rolar no celular.

Se você conhece sua viewport ( meu plug-in para adicionar a viewport à<body> ), basta adicionar uma alternância css para a position.

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

Também adiciono isso para impedir que a página subjacente salte para a esquerda / direita ao mostrar / ocultar modais.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

— Brad
fonte

2

Existe alguma maneira de fazer com que a parte móvel não salte para o topo?

— WraithKenny

1

O que funcionou para mim foi transformar o elemento que deveria estar oculto pelo estouro da posição: absoluta para a posição: fixo. Agradecidamente.

— Chuck Le Butt

1

@WraithKenny - Se você quiser que a página evite pular para o topo em um dispositivo móvel, use a seguinte abordagem hack'ish / feia. Dentro da sua função modal, certifique-se de obter o deslocamento da rolagem atual antes de fazer qualquer coisa, depois aplique o estilo modal e também defina a margem superior do seu corpo igual ao menos o deslocamento atual. Certifique-se de que ao remover o modal, defina a margem de volta para 0 e role a página de volta para o deslocamento original.

— Emil Borconi

2

Essa solução funciona apenas se o conteúdo do seu modal se encaixar na tela, ou seja, você não precisa rolar o próprio modal.

— Tobias

Existem outros elementos posicionados fixos e absolutos na minha página também. Fazendo o corpo position:fixed or absoluteperturbar suas posições também. Não é adequado / trabalho no meu caso :(

— sohaiby

31

Esta é a solução mais simples para resolver a rolagem horizontal no Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}

— Waltur Buerk
fonte

1

Parece funcionar. Mas você tem uma explicação por que isso funciona?

— LarS

Não, finalmente não funcionou. Acabei fazendo as contas e certificando-me de que as div não sejam maiores do que o permitido, o css calc () me ajudou muito aqui, pois permite a mistura de larguras relativas (vw ou%) e larguras absolutas (px).

— LarS

Claro que isso é uma solução alternativa. Ainda há algo transbordando em algum lugar, está cortado agora. Tente adicionar uma regra css: * {outline: 1px vermelho sólido; } Se você ainda não consegue encontrar o elemento que está transbordando, provavelmente é causado por uma margem em algum lugar. Tente adicionar * {margin: 0! IMPORTANTE; } e veja se o excesso desaparece.

— Waltur Buerk

Funciona para mim. Interessante que o elemento oculto altere a largura do corpo. Para mim, no entanto, esse é o caso de TODOS os navegadores Safari, não apenas os móveis. Só tive que corrigir um table-responsivebug do Bootstrap 4 . Essa foi a solução.

— CunningFatalist #

2

Não acredito que isso ainda é um problema em 2019. Mas a solução acima funcionou totalmente. THX.

— staxim

28

Como afirma @Indigenuity, isso parece ser causado por navegadores que analisam a <meta name="viewport">tag.

Para resolver esse problema na fonte, tente o seguinte:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

Nos meus testes, isso evita que o usuário diminua o zoom para visualizar o conteúdo excedente e, como resultado, também evita o deslocamento / rolagem para ele.

— Tempurturtul
fonte

A adição initial-scale=1a uma metatag de viewport existente realmente corrige o problema. Obrigado!

— precisa saber é o seguinte

6

Para mim foi o minimum-scale=1que fixa-lo

— jpenna

Isso é o que realmente funcionou para mim depois de tentar todo o resto. Muito obrigado !

— Harsh Limaye 03/07

16

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

funciona no iOS9

— ollio
fonte

3

Ele faz o trabalho, mas a posição de colocar: fixo para o seu corpo faz você rolar para cima

— ThaoD5

1

Estranho, mas funcionou para mim sem posição fixa também. Apenas uma de todas as soluções aqui!

— Garavani

Apenas um que funcionou para mim, usando chrom e boostrap + AngularJS

— kiwicomb123

6

Mantenha a janela de visualização intocada: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Supondo que você deseje obter o efeito de uma barra preta contínua no lado direito: #menubarnão deve exceder 100% , ajuste o raio da borda de modo que o lado direito fique ao quadrado e ajuste o preenchimento para que se estenda um pouco mais para a direita . Modifique o seguinte para o seu #menubar:

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

Ajustar o paddingpara 10px de folhas curso menu à esquerda para a borda do bar, você pode colocar o restante 40px para cada um dos li, 20px em cada lado esquerda e direita:

.menuitem {
display: block;
padding: 0px 20px;
}

Quando você redimensiona o navegador menor, você ainda encontra o fundo branco: coloque sua textura de fundo em vez de sua div para body. Ou então, ajuste a largura do menu de navegação de 100% para um valor mais baixo usando consultas de mídia. Existem muitos ajustes a serem feitos no seu código para criar um layout adequado. Não sei o que você pretende fazer, mas o código acima corrigirá a barra transbordante.

— Anne
fonte

se você usar, box-sizing: border-box;poderá adicionar preenchimento a uma div de 100% de largura.

— Charles John Thompson III

6

A criação de uma div de wrapper de site dentro do corpo e a aplicação do estouro-> x: oculto no wrapper INSTEAD do corpo ou html corrigiram o problema.

Isso funcionou para mim depois de adicionar também position: relativeao invólucro.

— Isaac F
fonte

Isso funcionou para mim. O efeito colateral foi que eu tenho duas barras de rolagem em vez de uma. A solução foi fazê-lo em overflow: hiddenvez de overflow-x: hidden. Funciona no Safari móvel, Chrome, IE11 no OSX e Win.

— pop

4

Adicionar um wrapper <div>ao longo de todo o seu conteúdo funcionará. Enquanto semanticamente "icky", adicionei uma div com uma classe de overflowWrap dentro da bodytag e, em seguida, definai set CSS como este:

html, body, .overflowWrap {
overflow-x: hidden;
}

Pode ser um exagero agora, mas funciona como um encanto!

— MBurnette
fonte

4

Encontrei o mesmo problema em dispositivos Android, mas não em dispositivos iOS. Gerenciado para resolver especificando position: relativo na div externa dos elementos absolutamente posicionados (com estouro: oculto para div externa)

— Kwok Pan Fung
fonte

4

Nenhuma solução única anterior funcionou para mim, eu tive que misturá-las e resolvi o problema também em dispositivos mais antigos (iphone 3).

Primeiro, tive que agrupar o conteúdo html em uma div externa:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Então eu tive que aplicar o estouro oculto no wrapper, porque o estouro-x não estava funcionando:

  #wrapper {
    overflow: hidden;
  }

e isso corrigiu o problema.

— spaghetticode
fonte

Como isso é diferente da resposta da @ Indigenuity?

— 21415 Ian Kemp em

3

@ian estouro Kemp: escondido = overflow-x: escondido

— código espaguete

3

Resolvi o problema usando o overflow-x: hidden; do seguinte modo

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

estrutura é a seguinte

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

— vikas etagi
fonte

3

Como subaracnídeo disse overflow-x oculto para o corpo e html funcionou Aqui está o exemplo de trabalho

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

Ligação

— Skylin R
fonte

1

Estou trabalhando nisso há algumas horas, tentando várias combinações de coisas desta e de outras páginas. O que funcionou para mim no final foi fazer uma divisão do wrapper do site, conforme sugerido na resposta aceita, mas definir ambos os estouros para ocultos, em vez de apenas o excesso de x. Se eu deixar o estouro-y na rolagem, acabo com uma página que rola apenas verticalmente alguns pixels e depois para.

#all-wrapper {
  overflow: hidden;
}

Apenas isso foi suficiente, sem definir nada no corpo ou nos elementos html.

— companheiro
fonte

1

Eu tentei de várias maneiras com as respostas neste tópico, principalmente funciona, mas obtive algum efeito colateral, como se eu usasse o overflow-x, body,htmlpois isso pode retardar / congelar a página quando os usuários rolam para baixo no celular.

usar position: fixedno wrapper / div dentro do corpo também é bom, mas quando tenho um menu e uso Javascript, clique em rolagem animada para alguma seção, não está funcionando.

Então, eu decidi usar touch-action: pan-y pinch-zoomno wrapper / div dentro do corpo. Problema resolvido.

— Jirayu L
fonte

0

A única maneira de corrigir esse problema no meu modal de inicialização (contendo um formulário) era adicionar o seguinte código ao meu CSS:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

— Tobias
fonte