禁用滚动，但保持缩放功能 [英] Disable scrolling, but maintain ability to zoom
问题描述
在我正在开发的响应式网站上，我有自己的小灯箱脚本，可以在保持宽高比的同时全屏打开图像。这很简单，使用2个div（外部fullscreen-div，黑色背景lbBlack，内部div，图像lbImg）：
On a responsive site I'm developing I have my own little lightbox-script which opens images fullscreen while maintaining their aspect ratio. It's pretty simple, uses 2 divs (outer fullscreen-div with black background "lbBlack" and inner div with image "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-prevention，因为body-overflow-hidden不是足以避免在灯箱打开时滚动。
For iOS, I had to add the ontouchmove-prevention, because body-overflow-hidden wasn't enough to avoid scrolling while the lightbox is opened.
现在上面这个工作解决方案的大问题：我想启用缩放图像。使用ontouchmove代码可以防止这种情况。
Now the "big problem" for this working solution above: I want to enable zooming on the image. This is prevented with the "ontouchmove"-code.
任何想法？
HTML-code：
HTML-code:
<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上滚动？
So I think what I am looking for is a method to prevent scrolling while still maintaining the possibility to zoom. I still don't get it why body-overflow:hidden still has the ability to scroll on iOS??
推荐答案
嗯，拉斐尔，
这可能并不完美，但它应该让你朝着正确的方向前进。我在Android上测试过，我处理Apple内容的好友目前无法使用。滚动和其他移动被禁用，但您可以缩放。然而，一个问题是，当您实际处于缩放变焦过程中时，您可以移动图片。夹点缩放完成后，您始终可以将图片捕捉回中心。 （这甚至可能看起来很整洁）。
this might not be perfect, but it should get you going in the right direction. I tested on Android, my buddy who handles the Apple stuff is unavailable at the moment. Scrolling and other moving is disabled, but you can zoom. One problem, however, is when you are actually in the process of pinch zooming you can move the picture around. You could always snap the picture back to the center after the pinch zoom is complete. (That might even look neat).
注意我向jQuery原型添加了一个方法，并为jQuery.Event原型添加了一个属性。
Notice I added a method to the jQuery prototype and a property to the jQuery.Event prototype.
/*global console, $*/
/*jslint browser: true*/
(function () {
"use strict";
$.fn.detectPinch = function () {
var numTouches = 0;
// each finger touch triggers touchstart
// (even if one finger is already touching)
$(document).on('touchstart', function (event) {
// if numTouches is more than 1, reset it to 0
// or else you can have numTouches >= 2 when
// actually only one finger is touching
numTouches = (numTouches > 1) ? 0 : numTouches;
// if numTouches is 0 or 1, increment it
numTouches = (numTouches < 2) ? numTouches += 1 : 2;
console.log(numTouches + ' start');
}).on('touchend', function (event) {
// another safety check: only decrement if > 0
numTouches = (numTouches > 0) ? numTouches -= 1 : 0;
console.log(numTouches + ' end');
});
// all event objects inherit this property
$.Event.prototype.isPinched = function () {
return (numTouches === 2) ? true : false;
};
return this;
};
$(document).ready(function (event) {
// call the method we added to the prototype
$(document).detectPinch();
$("#posts").on("click", "img", function (event) {
$(this).css('visibility', 'hidden');
$('#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";
});
$('#lbBlack').on("click", "#lbImg, body", function (event) {
$('#lbBlack').fadeOut(500);
$('#posts img').css('visibility', 'visible');
document.body.style.overflow = "visible";
});
}).on('touchmove', function (event) {
// prevent one-finger movements
if (!event.isPinched()) {
event.preventDefault();
console.log('prevented');
}
});
}());
这篇关于禁用滚动，但保持缩放功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
