禁用滾動，但保持縮放的能力

在我正在開發的響應網站上，我擁有自己的小燈箱腳本，可在保持寬高比的同時以全屏方式打開圖像。這很簡單，使用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

禁用滾動，但保持縮放的能力

回答

相關問題