¿Desbordamiento: oculto aplicado a <body> funciona en iPhone Safari?

131

¿Se overflow:hiddenaplica para <body>trabajar en iPhone Safari? Parece que no. No puedo crear un contenedor en todo el sitio web para lograr eso ...

¿Conoces la solución?

Ejemplo: tengo una página larga, y simplemente quiero ocultar el contenido que se encuentra debajo del "pliegue", y debería funcionar en iPhone / iPad.

— Francesco
fuente

1

Buscando desesperadamente encontrar la respuesta a esto yo mismo.

— mwilcox

115

Tenía un problema similar y se encontró que la aplicación overflow: hidden;de ambos htmly bodyresuelto mi problema.

html,
body {
    overflow: hidden;
}

Para iOS 9, es posible que deba usar esto en su lugar: (¡Gracias chaenu!)

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

— Alex Haas
fuente

12

Esto no funciona en iOS Safari. posición: relativo también es necesario.

— Kevin Borders

55

Sí, agregue tanto relativo como desbordamiento a html + body

— wutang

3

esto no funciona en iOS 9, incluso usando la posición relativa en el cuerpo y html

— Charles John Thompson III

1

Una palabra de advertencia, el desbordamiento oculto en la etiqueta <html> romperá el evento de desplazamiento de jQuery

— Brett Gregson el

2

Esto no funciona para mí en iOS 9, Safari. Cuerpo aún desplazable, también después de agregar position: relative.

— Edo

87

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

— laFunk
fuente

3

GRACIAS. TÚ. Tuve un gran problema cuando los elementos se transfirieron desde fuera de la ventana gráfica hacia adentro. Ocurriría un error extraño donde el contenido se extendió. ¡Esta fue la solución para mí!

— Eric

48

En mi caso, agregar "posición: relativo" no ayudó pero agregar "posición: fijo" funcionó.

— LeastOne

1

Sí, esto funcionó. Estoy construyendo un sitio donde quieren que el navegador móvil pase por encima del contenido, pero cuando está abierto, el contenido detrás del navegador en el fondo todavía se desplaza. Las otras respuestas con posición, desbordamiento y altura también funcionaron, pero con la altura la página salta a la parte superior cuando abro el navegador. Supongo que es exclusivo de mi situación, pero pensé en mencionarlo en caso de que alguien más con navegación superpuesta tenga el mismo problema.

— moonunit7

¿A dónde va el envoltorio? ¿Cómo es esta una respuesta completa?

— Kugel

8

La adición de posición fija hace abordan el tema, pero hace que el salto de página a la parte superior, que es malo para UX si se va a implementar esto en segundo plano mientras usted se presenta un menú o modal. Para hacer un buen UX, debe, antes de bloquear la posición, almacenar la posición de desplazamiento de la página y luego volver a aplicarla después de desbloquearla.

— mike

27

Algunas soluciones enumeradas aquí tenían algunos problemas técnicos extraños al estirar el desplazamiento elástico. Para arreglar eso usé:

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

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

— Davey
fuente

44

Esto es bueno (funciona mejor en mi caso que position: relative) sin embargo, la posición de desplazamiento se pierde después de restaurar el estilo predeterminado (por ejemplo, cerrar el menú).

— jmarceli

1

Para la posición de desplazamiento se puede utilizar js (jQuery en este ejemplo) hacer algo como esto:

// 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

¡Eso realmente me funcionó!

— D.Steinel

8

Tuve este problema hoy en iOS 8 y 9 y parece que ahora necesitamos agregar altura: 100%;

Entonces agregue

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

— chaenu
fuente

4

Combinando las respuestas y comentarios aquí y esta pregunta similar aquí funcionó para mí.

Entonces publicando como una respuesta completa.

A continuación, le indicamos cómo debe colocar un contenedor de división alrededor del contenido de su sitio, justo dentro de la <body>etiqueta.

 <!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>

Cree la clase de contenedor como se muestra a continuación.

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

También obtuve la idea de esta respuesta aquí .

Y esta respuesta aquí también tiene algo de reflexión. Algo que probablemente funcionará igual de bien tanto en computadoras de escritorio como en dispositivos.

— Devraj Gadhavi
fuente

Esta fue la solución para mí.

— Roel Magdaleno

1

Esto hace que la página se desplace hacia arriba cuando el modal se cierra.

— Jason

4

Está funcionando en el navegador Safari.

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

— Sridhar
fuente

4

Para mi esto:

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

No fue suficiente, no funcioné en iOS en Safari. También tuve que agregar:

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

Para que funcione bien. Funciona bien ahora :)

— Loosie94
fuente

2

He trabajado con <body>y<div class="wrapper">

Cuando se abre una ventana emergente ...

<body> obtiene una altura del 100% y un desbordamiento: oculto

<div class="wrapper"> obtiene posición: relativa; desbordamiento: oculto; altura: 100%;

Uso JS / jQuery para obtener la posición de desplazamiento real de la página y almacenar el valor como atributo de datos al cuerpo

Luego me desplazo a la posición de desplazamiento en el DIV .wrapper (no en la ventana)

Aquí está mi solución:

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 bien en ambos lados ... escritorio y móvil (iOS).

Sugerencias y mejoras son bienvenidas :)

¡Salud!

— Toge
fuente

1

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

agregue esto como predeterminado a su CSS

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

alternar Clasifica esta clase para cortar la página

cuando apaga esta clase, la primera línea volverá a llamar a la barra de desplazamiento

— Largo invierno
fuente

0

Sí, esto está relacionado con nuevas actualizaciones en safari que están rompiendo su diseño ahora si usa desbordamiento: oculto para encargarse de borrar divs.

— Lee McAlilly
fuente

10

¿Puedes entrar en más detalles con esto o citar una fuente? Esta respuesta puede ser correcta, pero no es muy útil.

— pjmorse

0

Se aplica, pero solo se aplica a ciertos elementos dentro del DOM. por ejemplo, no funcionará en una tabla, td u otros elementos, pero funcionará en una etiqueta <DIV>.
p.ej:

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

Solo probado en iOS 4.3.

Una edición menor: puede que sea mejor usar desbordamiento: desplazarse para que funcione el desplazamiento de dos dedos.

— Adán
fuente

0

¿Por qué no envolver el contenido que no desea que se muestre en un elemento con una clase y establecer esa clase display:noneen una hoja de estilo destinada solo para el iPhone y otros dispositivos portátiles?

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

— S16
fuente

0

Esto es lo que hice: compruebo la posición y del cuerpo, luego lo fijo y ajusto la parte superior al negativo de esa posición. En reversa, hago que el cuerpo esté estático y establezco el desplazamiento al valor que grabé 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.
fuente

-3

Simplemente cambie la altura del cuerpo <300 px (la altura de la vista móvil en el espacio terrestre oscila entre 300 px y 500 px)

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
fuente

No es una solución muy elegante, y causará problemas en los dispositivos iOS que son más grandes que los píxeles específicos que terminas eligiendo. Se debe usar una solución diferente.

— Badrush