Отключить прокрутку, но сохранить возможность масштабирования
На адаптивном сайте, который я разрабатываю, у меня есть свой собственный маленький lightbox-скрипт, который открывает изображения в полноэкранном режиме, сохраняя их пропорции. Это довольно просто, использует 2 div (внешний fullscreen-div с черным фоном "lbBlack" и внутренний div с изображением "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;
}
});
});
Для iOS мне пришлось добавить функцию предотвращения касания, потому что скрытия переполнения тела было недостаточно, чтобы избежать прокрутки, когда лайтбокс открыт.
Теперь «большая проблема» для этого рабочего решения выше: я хочу включить масштабирование изображения. Это предотвращается с помощью кода «ontouchmove».
Есть идеи?
HTML-код:
<body>
<div id="lbBlack">
<img id="lbImg">
</div>.....
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;
}
Поэтому я думаю, что я ищу метод предотвращения прокрутки при сохранении возможности увеличения. Я до сих пор не понимаю, почему переполнение тела: скрытый по-прежнему имеет возможность прокрутки на iOS ??