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

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

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

답변

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

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

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

.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'); 
            }
        });