禁用滚动，但保持缩放function

在我正在开发的响应式网站上，我有自己的小灯箱脚本，可以在保持宽高比的同时全屏打开图像。 这很简单，使用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-prevention，因为body-overflow-hidden不足以避免在灯箱打开时滚动。

现在上面这个工作解决方案的“大问题”：我想在图像上启用缩放。 使用“ontouchmove”代码可以防止这种情况。

有任何想法吗？

HTML代码：

  
  
..... 

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上滚动的能力？

Answer 1

拉斐尔，

这可能不完美，但它应该让你朝着正确的方向前进。 我在Android上测试过，我处理Apple内容的好友目前无法使用。 滚动和其他移动被禁用，但您可以缩放。 然而，一个问题是，当您实际处于缩放变焦过程中时，您可以移动图片。 夹点缩放完成后，您始终可以将图片捕捉回中心。 （这甚至可能看起来很整洁）。

注意我向jQuery原型添加了一个方法，并为jQuery.Event原型添加了一个属性。

 /*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'); } }); }());