navegacion - ¿Desbordamiento: oculto aplicado al<cuerpo> trabajo en iPhone Safari?
borrar historial safari iphone (13)
¿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?
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
¿ overflow:hidden aplicado al <body> 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.
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/
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 <body> .
<!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 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.
Está trabajando en el navegador Safari.
html,
body {
overflow: hidden;
position: fixed
}
He trabajado con <body> y <div class="wrapper">
Cuando se abre la ventana emergente ...
<body> obtiene una altura del 100% y un desbordamiento: oculto
<div class="wrapper"> 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 :)
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 <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 ser mejor que use el desbordamiento: desplácese para que funcione el desplazamiento con dos dedos.
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%;
}
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;
}
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;
}
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