¿Desbordamiento: oculto aplicado al trabajo en iPhone Safari?

¿ overflow:hidden aplicado al trabajo 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.

Tuve un problema similar y descubrí que la aplicación de overflow: hidden; tanto html como body resolvieron mi problema.

 html, body { overflow: hidden; } 

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

 html, body { overflow: hidden; position: relative; height: 100%; } 
 body { position:relative; // that's it overflow:hidden; } 

Algunas soluciones que se enumeran aquí tienen algunas fallas técnicas extrañas al estirar el desplazamiento elástico. Para arreglar eso he usado:

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

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

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

Entonces agrega

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

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

Entonces publicar como una respuesta completa.

A continuación, le mostramos cómo debe colocar un div envoltorio alrededor del contenido de su sitio, justo dentro de la etiqueta .

         

Cree la clase contenedora de la siguiente manera.

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

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

    

Está trabajando en el navegador Safari.

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

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

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

.
p.ej:

   

Solo probado en iOS 4.3.

Una edición menor: puede ser mejor que use el desbordamiento: desplácese para que funcione el desplazamiento con dos dedos.

 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%; } 

alternarClase esta clase para cortar la página

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

He trabajado con y

Cuando se abre la ventana emergente …

obtiene una altura del 100% y un desbordamiento: oculto

gets position: relative; overflow: hidden; height: 100%;

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

Luego me desplazo a la posición scroll en el .Virtual DIV (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 dispositivo móvil (iOS).

Sugerencias y mejoras son bienvenidas 🙂

¡Aclamaciones!

Para mí esto:

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

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

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

Para que funcione bien Funciona bien ahora 🙂

Simplemente cambie la altura del cuerpo <300px (la altura de la ventana gráfica móvil en el espacio es de alrededor 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%; }