O overflow: hidden aplicado ao <body> funciona no iPhone Safari?

131

Será overflow:hiddenaplicado ao <body>trabalho no iPhone Safari? Parece que não. Não consigo criar um invólucro em todo o site para conseguir isso ...

Você conhece a solução?

Exemplo: eu tenho uma página longa e simplesmente quero ocultar o conteúdo que fica embaixo da "dobra" e deve funcionar no iPhone / iPad.

— Francesco
fonte

1

Procurando desesperadamente encontrar a resposta para isso.

— mwilcox

115

Eu tive um problema semelhante e descobri que me aplicava overflow: hidden;a ambos htmle bodyresolveu meu problema.

html,
body {
    overflow: hidden;
}

Para o iOS 9, pode ser necessário usá-lo: (Obrigado chaenu!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

— Alex Haas
fonte

12

Isso não funciona no iOS Safari. posição: relativo também é necessário.

— Kevin Borders

5

Sim, adicione ambos relativo e estouro ao html + body

— wutang

3

isso não funciona no iOS 9, mesmo usando posição relativa no corpo e html

— Charles John Thompson III

1

Uma palavra de advertência, transbordamento escondido na tag <html> vai quebrar evento de rolagem jQuery

— Brett Gregson

2

Isso não funciona para mim no iOS 9, Safari. Corpo ainda rolável, também após a adição position: relative.

— Edo

87

body {
  position:relative; // that's it
  overflow:hidden;
}

— laFunk
fonte

3

OBRIGADO. VOCÊS. Eu tive um grande problema ao fazer a transição de elementos de fora da janela de visualização para dentro. Ocorreria um bug estranho no qual o conteúdo era estendido. Esta foi a solução para mim!

— Eric

48

No meu caso, adicionar "posição: relativo" não ajudou, mas a adição de "posição: fixo" funcionou.

— LeastOne

1

Yip isso funcionou. Estou construindo um site em que eles desejam que a navegação móvel repasse o conteúdo - mas, quando aberta, o conteúdo por trás da navegação em segundo plano ainda rola. As outras respostas com posição, estouro e altura também funcionaram, mas com a altura a página salta para o topo quando abro a navegação. Eu acho que é único para a minha situação, mas pensei em mencioná-lo caso alguém com navegação sobreposta tenha o mesmo problema.

— moonunit7

Para onde vai o invólucro? Como isso é uma resposta completa?

— Kugel

8

Adicionando posição fixa faz endereço o problema, mas faz o salto página para o topo, que é ruim para UX, se você está implementando isso em segundo plano enquanto você apresenta um menu ou modal. Para criar um bom UX, antes de bloquear a posição, armazene a posição de rolagem da página e aplique-a novamente depois de desbloqueada.

— Mike

27

Algumas soluções listadas aqui tiveram algumas falhas estranhas ao esticar a rolagem elástica. Para consertar isso eu usei:

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Fonte: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

— Davey
fonte

4

Isso é bom (funciona melhor no meu caso que position: relative), no entanto, a posição de rolagem é perdida após a restauração do estilo padrão (por exemplo, fechamento do menu).

— jmarceli

1

Para a posição de rolagem, você pode usar js (jquery neste exemplo) faça algo parecido com isto:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— Davey

Isso realmente fez a diferença para mim!

— D.Steinel

8

Teve esse problema hoje no iOS 8 e 9 e parece que agora precisamos adicionar altura: 100%;

Então adicione

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

— chaenu
fonte

4

Combinar as respostas e comentários aqui e essa pergunta semelhante aqui funcionou para mim.

Então, postando como uma resposta completa.

Veja como você precisa colocar uma div de wrapper no conteúdo do site, apenas dentro da <body>tag.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Crie a classe wrapper como abaixo.

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

Eu também tive a idéia desta resposta aqui .

E esta resposta aqui também tem um pouco de reflexão. Algo que provavelmente funcionará igualmente bem em desktops e dispositivos.

— Devraj Gadhavi
fonte

Esta foi a solução para mim.

— Roel Magdaleno

1

Isso faz com que a página role para cima para mim quando o modal é fechado.

— Jason

4

Está trabalhando no navegador Safari.

html,
body {
  overflow: hidden;
  position: fixed
}

— Sridhar
fonte

4

Para mim isso:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

Não foi o suficiente, não funcionei no iOS no Safari. Eu também tive que adicionar:

top: 0;
left: 0;
right: 0;
bottom: 0;

Para fazê-lo funcionar bem. Funciona bem agora :)

— Loosie94
fonte

2

Eu trabalhei com <body>e<div class="wrapper">

Quando o pop-up é aberto ...

<body> obtém uma altura de 100% e um estouro: hidden

<div class="wrapper"> obtém posição: relativa; estouro: oculto; altura: 100%;

Eu uso JS / jQuery para obter a posição de rolagem real da página e armazenar o valor como atributo de dados ao corpo

Então eu rolar para a posição de rolagem no .wrapper DIV (não na janela)

Aqui está a minha solução:

JS / jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

Funciona bem em ambos os lados ... desktop e celular (iOS).

Dicas e melhorias são bem-vindas :)

Felicidades!

— Toge
fonte

1

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

adicione isso como padrão ao seu css

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

toggleClassifique esta classe para cortar a página

quando você desativa esta primeira linha da classe, chama a barra de rolagem de volta

— Longwinter
fonte

0

Sim, isso está relacionado a novas atualizações no safari que estão quebrando seu layout agora se você usar o overflow: hidden para cuidar da limpeza de divs.

— Lee McAlilly
fonte

10

Você pode entrar em mais detalhes com isso ou citar uma fonte? Esta resposta pode estar correta, mas não é muito útil.

— Pjmorse

0

Ele se aplica, mas se aplica apenas a certos elementos dentro do DOM. por exemplo, não funcionará em uma tabela, td ou em outros elementos, mas em uma tag <DIV>.
por exemplo:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Testado apenas no iOS 4.3.

Uma edição menor: é melhor usar o overflow: role para que a rolagem com dois dedos funcione.

— Adão
fonte

0

Por que não agrupar o conteúdo que você não deseja exibir em um elemento com uma classe e definir essa classe display:noneem uma folha de estilo destinada apenas ao iPhone e a outros dispositivos portáteis?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
fonte

0

Aqui está o que eu fiz: eu verifico a posição do corpo y, depois fixo o corpo e ajusto a parte superior ao negativo dessa posição. No sentido inverso, torno o corpo estático e defino a rolagem para o valor que registrei antes.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— Arie S.
fonte

-3

Simplesmente altere a altura do corpo <300px (a altura da janela de visualização móvel no espaço do terreno é de 300px a 500px)

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

— Kristian Lepi
fonte

Não é uma solução muito elegante e causará problemas nos dispositivos iOS maiores que os pixels específicos que você escolhe. Uma solução diferente deve ser usada.

— Badrush