fancybox가 페이지 위로 돌아 가기 방지

내 웹 사이트에서 fancybox 2.1.5를 사용하고 있습니다. 이미지를 열고 닫으면 의도하지 않게 페이지의 맨 위로 돌아갑니다. 문제는 당신이 열고 두 번째 이미지를 닫을 경우 페이지 상단에있는 자신을 발견 할 것이다 것을 볼 수 fancybox가 페이지 위로 돌아 가기 방지

<!DOCTYPE html> 
<head> 
    <style media="screen" type="text/css"> 
     body { 
      height: 100%; 
     } 
     html { 
      height: 100%; 
     } 
    </style> 
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" /> 
</head> 
<body> 
    <a href=#> 
     <img src="http://placehold.it/1000x600"> 
    </a> 
    <a class="fancybox" href="img/Gallery/500x600.gif"> 
     <img src="http://placehold.it/500x600"> 
    </a> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script> 
    <script> 
     $(document).ready(function() { 
      $('.fancybox').fancybox(); 
     }); 
    </script> 
</body> 
</html>

다음과 같은 최소한의 예에서 볼 수 있습니다.

내가 머리

<style media="screen" type="text/css"> 
    body { 
     height: 100%; 
    } 
    html { 
     height: 100%; 
    } 
</style>

의 초기 스타일을 삭제하는 경우 문제가 사라질 것으로 보인다. 본문 스타일이나 html 스타일 만 지우면 문제가 사라집니다. 문제가 발생하려면 body 및 html 높이를 모두 100 %로 설정해야합니다.

불행히도 나는 왜 이런 일이 발생하는지 이해하지 못합니다. 누군가 설명해 주시겠습니까?

참고 :이 문제에 대한 솔루션과 해킹을 발견하지만 난이

출처

2014-07-05 gota

에서 [최신 마스터] 받기 (https://github.com/fancyapps/fancyBox/archive/master.zip), 버그 (REF)를 고정 여기서 HTTPS : // github.com/fancyapps/fancyBox/issues/860 – JFK

고맙습니다. 최신 마스터를 다운로드했는데 이제는 작동하지만, 실제로 이미지를 열면 뒤쪽의 웹 사이트가 맨 위로 돌아가는 것을 볼 수 있습니다. 이미지는 원래 위치로 돌아갑니다. 그것은 약간 이상합니다. 그 버그가 해킹으로 수정되었다고 생각합니다. 어쩌면 그것은 내 몸과 HTML 스타일 정의와 관련된 것이지만, – gota

[fancybox2/fancybox가 가능한 페이지가 맨 위로 이동할 수 있음]을 복제 할 수 있는지 모르겠습니다. (http://stackoverflow.com/questions/13547007/fancybox2 -fancybox-causes-pages-to-the-top) – Palec

당신은 페이지 문제의 정상에 복귀 해결하기 위해 멋진 상자의 기본 도우미를 사용할 수 있습니다 일어나는 이유를 이해하고 싶습니다.

$('.fancybox').fancybox({ 
    padding: 0, 
    helpers: { 
    overlay: { 
     locked: false 
    } 
    } 
});

참조 : http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

출처

2014-07-05 10:00:21 Farshad

이 해킹을 가져 주셔서 감사합니다.하지만 왜 이런 일이 일어나고 있는지 이해하지 못했고 지금은 문제가 발생하여 영상. 오히려하지 않을 것입니다! 팬텀 박스가 열려있는 1) 동안 오버레이 스크롤을 사용하지 않도록 설정하는 두 가지 옵션이 – gota

입니다. v2.1.0으로 업그레이드 ... 태그에 class = "fancybox-lock"을 자동으로 추가하므로 팬시 박스 뒤에서 페이지를 스크롤 할 수 없습니다. - 또는 - 2). 다음 콜백을 추가하십시오. beforeShow : function() { $ ("body"). css ({ 'overflow-y': 'hidden'}); }, afterClose : function() { $ ("body") .css ({ 'overflow-y': 'visible'})); } onStart 및 onClosed는 fancybox v2.x이지만 1.3.x의 유효하지 않은 콜백 옵션입니다. – Farshad

감사합니다.하지만 2.1.5를 사용하고 있다고 생각했습니다. – gota

fancybox가 페이지 위로 돌아 가기 방지

답변

관련 문제