javascript - iPad desactivar el desplazamiento del documento pero no el desplazamiento por desbordamiento de div

Estoy desarrollando ventanas modales con la capacidad de ser desplazables, similares a las de Pinterest. Cuando se activan, se define overflow: hidden en body y overflow: auto en el contenedor de la ventana modal. Esto funciona muy bien en navegadores de escritorio, pero mi primera prueba en iPad (y supongo que probablemente en iOS en general) revela un problema:

Cuando termina el desplazamiento del modal, si el documento es más largo que el modal, el desplazamiento continúa.

Intenté esto con la intención de solo aceptar el desplazamiento si es activado por el modal o su contenedor:

// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
    if (($(e.target).attr('id') != id) &&
    ($(e.target).attr('id') != ('modal-'+id))) {
        e.preventDefault();
    }
});

Y realmente funciona haciendo estrictamente eso. El modal se desplaza y cuando termina de desplazarse, la página solo es posible desplazarse si se desplaza dentro del modal.

¿Tienes alguna idea?

Pruébalo en tus iPads si quieres (tienes que hacer clic en el botón modal): http://www.onebigrobot.com/beta/altair/transforms-so

¡Gracias de antemano!

Respuesta #1

¡Los pequeños cambios son poderosos!

Todo el problema se soluciona cambiando position: absolute por position: fixed en el contenedor del modal (y también en la máscara oscura del fondo si es necesario). De hecho, con la posición absoluta el modal solo funcionaba porque el botón estaba en la parte superior de la página.

Con la posición fija, los navegadores de escritorio funcionan perfectamente, y en el iPad ocurre algo interesante. Cuando el desplazamiento del modal termina, el desplazamiento de la página comienza a funcionar, pero con el modal siempre bien posicionado en la parte superior.

Espero que esta pregunta pueda ser útil para alguien.