[jquery] fancybox2 / fancybox로 인해 페이지가 맨 위로 이동합니다.

개발 사이트에 fancybox2를 구현했습니다.

내가 fancybox를 사용하면 (링크 클릭 등) 전체 html이 그 뒤로 이동하고 맨 위로 이동합니다. 다른 데모에서는 제대로 작동하지만 동일한 코드를이 프로젝트로 드래그하면 맨 위로 이동합니다. 인라인 div에 대한 링크뿐만 아니라 간단한 이미지 갤러리에도 사용할 수 있습니다.

누구든지 이것을 경험 했습니까?

답변

이것은 실제로 Fancybox 2의 도우미로 수행 할 수 있습니다.

$('.image').fancybox({
  helpers: {
    overlay: {
      locked: false
    }
  }
});

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

답변

Jordanj77은 정확하지만 가장 쉬운 해결책은 스타일 시트로 이동하여 섹션에 jquery.fancybox.css있는 행을 주석 처리하는 것 overflow: hidden !important;입니다..fancybox-lock

답변

나는 이것이 오래된 질문이라는 것을 알고 있지만 그것에 대한 좋은 해결책을 찾은 것 같습니다. 문제는 멋진 상자가 브라우저 스크롤바를 숨기기 위해 본문의 오버플로 값을 변경한다는 것입니다.

Dave Kiss가 지적했듯이 다음 매개 변수를 추가하여 팬시 박스가 이렇게하는 것을 막을 수 있습니다.

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

하지만 이제 멋진 상자 창을 보면서 메인 페이지를 스크롤 할 수 있습니다. 페이지 맨 위로 점프하는 것보다 낫지 만 우리가 정말로 원하는 것은 아닐 것입니다.

다음 매개 변수를 추가하여 올바른 스크롤을 방지 할 수 있습니다.

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

그리고 galambalaz에서 이러한 기능을 추가하십시오. 참조 : 스크롤링을 일시적으로 비활성화하는 방법?

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }

답변

문제는 fancyBox가 브라우저 스크롤바를 숨기기 위해 본문의 오버플로 값을 변경한다는 것입니다. 이 동작을 전환하는 옵션을 찾을 수 없습니다.

이를 방지하기 위해 fancyBox 코드의이 섹션을 제거 할 수 있습니다.

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}

답변

사실,이 문제를 해결하는 올바른 방법은 fancybox가 제공하는 옵션을 사용하는 것이므로 ( 이 답변 참조 ) CSS를 사용하여 문제를 해결할 수 있습니다. 라이브러리의 css 파일을 편집 할 필요가 없습니다. 다음을 애플리케이션의 기본 스타일 시트에 추가하기 만하면됩니다.

html.fancybox-lock {
    overflow: visible !important;
}

이 코드는 요소의 원래 오버플로를 재설정합니다. 문제는 요소 overflow: hidden;의 스크롤바 를 숨기고 <html>페이지가 맨 위로 “점프”하게 만드는 것입니다. 스크롤바의 위치를 유지하기 위해 오버플로를 다음과 같이 덮어 씁니다.overflow: visible;

답변

이것은 또한 도움이되었습니다

.fancybox-lock body {
    overflow: visible !important;
}

답변

받아 들여지는 대답은 실제로 문제를 해결하지 못하기 때문에 완전하지 않습니다. 다음은 창 점프 문제를 해결하는 동안 원하는 기능을 실제로 제공하는보다 완전한 답변입니다.

        $('.fancybox').fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            },
            beforeShow:function(){ 
                $('html').css('overflowX', 'visible'); 
                $('body').css('overflowY', 'hidden'); 
            },
            afterClose:function(){ 
                $('html').css('overflowX', 'hidden');
                $('body').css('overflowY', 'visible'); 
            }
        });