스크롤을 사용하지 않지만 확대/축소 기능을 유지하십시오.

반응 형 사이트에서 가로 세로 비율을 유지하면서 이미지를 전체 화면으로 여는 작은 라이트 박스 스크립트가 있습니다. 그것은 꽤 간단 (검정색 배경 "lbBlack"이미지 "lbImg"와 내부 사업부와 외부 전체 화면-DIV)이 개 된 div를 사용하여 iOS 용스크롤을 사용하지 않지만 확대/축소 기능을 유지하십시오.

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

, 나는 신체 - 때문에 ontouchmove 방지를 추가했다 overflow-hidden은 라이트 박스가 열려있는 동안 스크롤을 피하기에 충분하지 않았습니다.

위의 작업 해결책에 대한 "큰 문제": 이미지를 확대 할 수있게하려고합니다. 이것은 "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

오버플로 대신 오버플로 -x 및 오버플로 -y를 설정해 보았습니까? 또는 body 대신 #lbBlack div 자체에서 overflow-x, overflow-y 또는 overflow 속성을 설정할 수도 있습니다. – orb

방금 시도했는데, 어느 쪽도 작동하지 않습니다 ... –

Gimmie a sec 내가 전에 이것을 경험했다고 맹세합니다. jsFiddle에서 이걸로 잠깐 만요. 관련 HTML과 CSS를 게시 할 수 있습니까? – orb

음, 라파엘,

이 완벽하지 않을 수도 있습니다,하지만 당신이 올바른 방향으로 가야한다. 나는 안드로이드에서 테스트했는데, 애플 물건을 다루는 나의 친구는 현재 사용할 수 없다. 스크롤링 및 기타 이동은 사용할 수 없지만 확대/축소 할 수 있습니다. 그러나 한 가지 문제는 핀치 확대/축소 과정에서 실제로 그림을 움직일 수있을 때입니다. 핀치 줌이 완료된 후 항상 그림을 중앙으로 다시 스냅 할 수 있습니다. (그것은 심지어 깔끔하게 보일지도 모른다).

알림 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

스크롤을 사용하지 않지만 확대/축소 기능을 유지하십시오.

답변

관련 문제