禁用滚动，但保持缩放的能力

在我正在开发的响应网站上，我拥有自己的小灯箱脚本，可在保持宽高比的同时以全屏方式打开图像。这很简单，使用2周的div（外全屏-DIV黑色背景“lbBlack”与图像“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预防，因为身体 - 溢出隐藏不足以避免在打开灯箱时滚动。

上面这个工作解决方案的“大问题”：我想启用图像放大。这是通过“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上滚动??

来源

2013-04-14 Raphael Jeger

您是否尝试设置overflow-x和overflow-y而不是溢出？或者，也许在#lbBlack div本身而不是body上设置overflow-x，overflow-y或overflow属性。 – orb

刚刚尝试过，也不管用... –

gimmie一秒我发誓我已经通过这之前。让我在jsFiddle上捣鼓一分钟。你可以请发布相关的HTML和CSS？ – orb

嗯，拉斐尔，

，这可能不是完美的，但它应该让你在正确的方向前进。我在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'); 
     } 

    }); 
}());

来源

2013-04-15 07:52:24 orb

看起来很棒，我会尽快尝试并在此给予反馈。我的代码需要原型库吗？ –

谢谢。它只使用jQuery。 – orb

你最终为你工作拉斐尔？ – orb

禁用滚动，但保持缩放的能力

回答

相关问题