Desactivar el desplazamiento, pero mantener la capacidad de zoom
En un sitio receptivo que estoy desarrollando, tengo mi propio pequeño script de lightbox que abre las imágenes en pantalla completa manteniendo su relación de aspecto. Es bastante simple, usa 2 divs (div de pantalla completa externa con fondo negro "lbBlack" y div interna con imagen "lbImg"):
//super small lightbox ;)
$("#posts").on("click", ".img", function(event) {
$('#lbBlack').css('top',$(document).scrollTop());
$('#lbImg').attr('src', $(this).attr('src'));
$('#lbBlack').css('width',$(window).width());
$('#lbBlack').css('height',window.innerHeight);
$('#lbBlack').fadeIn(500);
$('#lbImg').css('margin-top',((window.innerHeight-$('#lbImg').height()))/2);
document.body.style.overflow="hidden";
document.ontouchmove = function(event){
event.preventDefault();
}
$('#lbBlack').on("click", "#lbImg, body", function(event) {
$('#lbBlack').fadeOut(500);
document.body.style.overflow="visible";
document.ontouchmove = function(event){
return true;
}
});
});
Para iOS, tuve que agregar la prevención "touchmove", porque el ocultamiento por desbordamiento del cuerpo no era suficiente para evitar el desplazamiento mientras se abría la caja de luz.
Ahora el "gran problema" para esta solución de trabajo anterior: Quiero habilitar el zoom en la imagen. Esto se evita con el código "uponuchmove".
¿Algunas ideas?
Código HTML:
<body>
<div id="lbBlack">
<img id="lbImg">
</div>.....
Código CSS:
#lbBlack {
display: none;
position: absolute;
left: 0;
background-color: black;
z-index: 2001;
text-align: center;
}
#lbBlack #lbImg {
max-height: 100%;
max-width: 100%;
position: relative;
}
Así que creo que lo que busco es un método para evitar el desplazamiento mientras se mantiene la posibilidad de hacer zoom. Todavía no entiendo por qué body-overflow: hidden todavía tiene la capacidad de desplazarse en iOS.