mobile-safari - body - block scroll css
Desbordamiento móvil: desplazamiento y desplazamiento de desbordamiento: toque// evitar "rebotar" de la vista (4)
En un dispositivo móvil (safari, webviews, donde sea), overflow:scroll y overflow-scrolling: touch dar un desplazamiento bastante suave, que es genial.
Pero hace que la página "rebote" (área rodeada con un círculo a continuación), que no es el caso cuando no la está utilizando, pero que hace que la experiencia sea un poco menos "nativa" (y más sencillamente, en la medida en que puedo tener una opinión al respecto, es absolutamente inútil)
¿Hay alguna manera de evitar que suceda? Muchas gracias por su ayuda / sugerencias / respuestas
Hay una gran publicación en este blog aquí:
http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
Junto con una demo aquí:
http://www.kylejlarson.com/files/iosdemo/
En resumen, puede usar lo siguiente en un div que contenga su contenido principal:
.scrollable {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
El problema que creo que estás describiendo es cuando intentas desplazarte hacia arriba dentro de un div que ya se encuentra en la parte superior, luego se desplaza hacia arriba en la página en lugar de subir el div y provoca un efecto de rebote en la parte superior de la página. Creo que tu pregunta es ¿cómo deshacerte de esto?
Para solucionar esto, el autor sugiere que utilice ScrollFix para aumentar automáticamente la altura de los divs desplazables.
También vale la pena señalar que puede usar lo siguiente para evitar que el usuario se desplace hacia arriba, por ejemplo, en un elemento de navegación:
document.addEventListener(''touchmove'', function(event) {
if(event.target.parentNode.className.indexOf(''noBounce'') != -1
|| event.target.className.indexOf(''noBounce'') != -1 ) {
event.preventDefault(); }
}, false);
Desafortunadamente, todavía hay algunos problemas con ScrollFix (por ejemplo, cuando se usan campos de formulario), pero la lista de problemas en ScrollFix es un buen lugar para buscar alternativas. Algunos enfoques alternativos se discuten en este tema .
Otras alternativas, también mencionadas en la publicación del blog, son Scrollability e iScroll
Me las arreglé para encontrar una solución CSS para evitar el rebote de la ventana gráfica. La clave fue envolver el contenido en 3 divs con -webkit-touch-overflow: scroll aplicado a ellos. La división final debe tener una altura mínima de 101%. Además, debe establecer explícitamente anchos / alturas fijas en la etiqueta del cuerpo que representa el tamaño de su dispositivo. He añadido un fondo rojo en el cuerpo para demostrar que es el contenido que ahora rebota y no la ventana de safari móvil.
El código fuente a continuación y aquí hay un plunker (esto también ha sido probado en iOS7 GM). http://embed.plnkr.co/NCOFoY/preview
Si pretende ejecutar esto como una aplicación de pantalla completa en el iPhone 5, modifique la altura a 1136 píxeles (cuando Apple-mobile-web-app-status-bar-style está configurado como ''negro-translúcido'' o 1096px cuando está configurado como '' negro''). 920x es la altura de la ventana gráfica una vez que se ha tenido en cuenta el cromo del safari móvil).
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no" />
<style>
body { width: 640px; height: 920px; overflow: hidden; margin: 0; padding: 0; background: red; }
.no-bounce { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.no-bounce > div { width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.no-bounce > div > div { width: 100%; min-height: 101%; font-size: 30px; }
p { display: block; height: 50px; }
</style>
</head>
<body>
<div class="no-bounce">
<div>
<div>
<h1>Some title</h1>
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
<p>item 4</p>
<p>item 5</p>
<p>item 6</p>
<p>item 7</p>
<p>item 8</p>
<p>item 9</p>
<p>item 10</p>
<p>item 11</p>
<p>item 12</p>
<p>item 13</p>
<p>item 14</p>
<p>item 15</p>
<p>item 16</p>
<p>item 17</p>
<p>item 18</p>
<p>item 19</p>
<p>item 20</p>
</div>
</div>
</div>
</body>
</html>
tu podrías intentar
$(''*'').not(''#div'').bind(''touchmove'', false);
agrega esto si es necesario
$(''#div'').bind(''touchmove'');
Tenga en cuenta que todo es fijo excepto #div
body {
position: fixed;
height: 100%;
}