Отключить прокрутку, но сохранить возможность масштабирования
На адаптивном сайте яВ разработке у меня есть свой собственный небольшой скрипт-лайтбокс, который открывает изображения в полноэкранном режиме, сохраняя их соотношение сторон. Это'довольно просто, использует 2 div (внешний полноэкранный 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-код:
<img id="lbImg">
.....
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 ??