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

105

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

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

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

jquery css fancybox-2

— 보안관
소스

참고 : 방금 ipad와 iphone에서이 문제를 확인했는데이 문제가 발생하지 않습니다 ... 그러나 크롬과 파이어 폭스에 있습니다.

— sheriffderek 2012

1

당신이 fancybox의 v2.1.5를 사용하는 경우이 문제가 여기에서 양식을 다운로드 할 수있는 최신 마스터에서 수정 된 것 같다 github.com/fancyapps/fancyBox/archive/master.zip을 JS 또는 CSS 파일 중 하나에 더 이상 해킹 있도록 .

— JFK

331

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

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

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

— 데이브 키스
소스

11

이것은 확실히 그것을하는 방법입니다. OP sould는 이것을 수락 된 답변으로 표시합니다. 감사합니다!

— cfx

전적으로 동의합니다. (fancybox2에서 코드를 제거하기 위해) 허용되는 대답은 해킹입니다.

— Rob Gonzalez

안타깝게도 받아 들여진 답변은 1 년 동안 변경되지 않았습니다. 미래의 사용자가 "플러그인에서 코드 잘라 내기"답변이 아닌 이것을 구현하기를 바랍니다.

— AndyWarren

5

이 답변으로 문제가 해결되지 않는다고 생각합니다. 많은 사람들 이 fancybox 뒤의 콘텐츠를 스크롤하는 것을 원하지 않을 수 있습니다 (가로 locked설정된 경우 발생합니다 false.) 이것은 일부 시나리오에서 다른 문제를 만들 수있는 문제에 대한 임시 해결 방법입니다. 이 버그이었고, 그것은 최신 마스터에서 수정되었습니다 github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK 스크롤링 때문에이 수정이 실제로 이상적이지 않을 수 있다는 데 동의하지만 최신 마스터로 테스트했으며 페이지가 여전히 맨 위로 이동합니다. 하지만 fancybox가 닫히면 원래 위치로 되돌아갑니다.

— Mr Jonny Wood

35

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

— 빠른 반사
소스

4

도우미를 사용하면 페이지가 마우스 휠로 오버레이 아래로 계속 스크롤되므로 도우미를 사용하는 것보다 낫습니다. 오버플로를 주석 처리하면 점프가 방지되지만 스크롤바는 여전히 기본 페이지에 대해 잠겨 있습니다.

— 파나마 잭

14

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

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

— 조란
소스

9

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

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

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

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

— 요르단
소스

예! 그것이 내 페이지가 왼쪽으로 20px 점프 한 이유이기도합니다. 감사! 내 문제 2 개를 해결하셨습니다!

— sheriffderek

스크롤 막대가 있습니다 ...하지만 항상 overflow-y를 사용합니다. scroll; 어쨌든 저에게는 공정한 트레이드 오프입니다.

— sheriffderek

나는 그것이 마우스 휠 기능을 차단할 것이라고 생각합니다. 나는 계속해서 다른 솔루션을 찾을 것입니다. 그러나 내가 말했듯이, 이것은 지금 당장 트릭을하고 있습니다!

— sheriffderek

3

당신이 fancybox의 v2.1.5를 사용하는 경우이 문제가 여기에서 양식을 다운로드 할 수있는 최신 마스터에서 수정 된 것 같다 github.com/fancyapps/fancyBox/archive/master.zip을 JS 또는 CSS 파일 중 하나에 더 이상 해킹 있도록 .

— JFK

1

이것은 당시 가장 좋은 답변이었습니다. 어떤 이유로 든 레거시 사이트 등이있는 경우 --- 이것을 참조로 참조하십시오.

— sheriffderek 2014

6

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

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

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

— thexpand
소스

이것이 일어날 수있는 또 다른 이유는 <body>or / and가 <html>있을 수 있기 때문입니다height: 100%

— thexpand

4

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

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

— hsobhy
소스

1

타사 스타일을 덮어 쓰는 것은 특히 중요 수정자를 사용하여 캐스케이드를 중단해야하는 경우 좋은 생각이 아닙니다. 나는 모두가 위의 Dave Kiss가 제공 한 수정 사항을 사용하도록 권장합니다.

— Fabian Schöner 2015 년

1

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

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

— 이안
소스

0

이 답변은 늦었을 수도 있지만 나중에 도움이 될 수 있습니다. 이미지 fancybox를 클릭하거나 닫은 후 웹 사이트가 맨 위로 스크롤되면 다음을 삭제할 수 있습니다.

F.trigger('onReady');

또는 더 나은 사용 :

/*F.trigger('onReady');*/

fancyBox 버전 : 2.1.5 (2013 년 6 월 14 일 금요일) 코드의 해당 부분은 897 행에 있습니다.

— 나 호미 아티 아스
소스

0

fancybox 기본 함수를 사용하는 경우 실제로 다음과 같이 코딩 할 수 있습니다.

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });

— 스틸 록키
소스

-4

나는 그것을 다음과 같이 고쳤다.

overflow: hidden !important;

의 .fancybox-lock신체 jquery.fancybox.css. 그리고 스크롤바가 점프하지 않습니다. :)

— 사용자 2684988
소스

4

그것은 한 달 전에 빠른 반사 신경이 말한 것입니다.

— BoltClock