fancybox2 / fancybox powoduje, że strona przeskakuje na górę

105

Zaimplementowałem fancybox2 na stronie deweloperskiej.

Kiedy włączam fancybox (klikam link itp.), Cały html przesuwa się za nim - i przechodzi na górę. Mam go dobrze w innym demo, ale kiedy przeciągam ten sam kod do tego projektu, przeskakuje on na górę. Nie tylko z linkami do wbudowanych elementów div, ale także do prostej galerii obrazów.

Czy ktoś tego doświadczył?

jquery css fancybox-2

— szeryfderek
źródło

uwaga: właśnie sprawdziłem to na iPadzie i iPhonie i ten problem nie występuje ... jednak jest w Chrome i Firefox.

— szeryfderek

1

Jeśli używasz fancybox v2.1.5, wydaje się, że problem został rozwiązany w najnowszej wersji master, którą możesz pobrać tutaj github.com/fancyapps/fancyBox/archive/master.zip, więc nie ma więcej hacków do plików js lub css .

— JFK

331

W rzeczywistości można to zrobić za pomocą pomocnika w Fancybox 2.

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

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

— Dave Kiss
źródło

11

To zdecydowanie sposób na zrobienie tego. OP powinien oznaczyć to jako zaakceptowaną odpowiedź. Dziękuję Ci za to!

— cfx

Kompletnie się zgadzam. Zaakceptowaną odpowiedzią (usunięcie kodu z fancybox2) jest włamanie.

— Rob Gonzalez

Niestety, przyjęta odpowiedź nie została zmieniona przez cały rok. Mam nadzieję, że przyszli użytkownicy zaimplementują to, a nie odpowiedź „wycinaj kod z wtyczki”.

— AndyWarren

5

Myślę, że ta odpowiedź nie rozwiązuje problemu. Wiele osób może nie chcieć przewijać zawartości za fancybox (tak się stanie, jeśli lockedjest ustawione na false). Jest to tymczasowe obejście problemu, który może powodować inny w niektórych scenariuszach. To był błąd i został poprawiony w najnowszym głównym github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Zgadzam się, że ta poprawka może nie być idealna ze względu na przewijanie, ale przetestowałem ją z najnowszym wzorcem i strona nadal przeskakuje na górę. Jednak wraca do pierwotnej pozycji, gdy fancybox jest zamknięty.

— Pan Jonny Wood

35

Jordanj77 jest poprawny, ale najłatwiejszym rozwiązaniem jest po prostu przejście do arkusza stylów jquery.fancybox.cssi skomentowanie wiersza mówiącego overflow: hidden !important;w sekcji.fancybox-lock

— szybki refleks
źródło

4

Jest to lepsze niż użycie pomocnika, ponieważ w przypadku pomocnika strona nadal przewija się pod nakładką za pomocą kółka myszy. Komentowanie przepełnienia zapobiega przeskakiwaniu, ale także pasek przewijania jest nadal zablokowany dla strony głównej.

— Panama Jack

14

Zdaję sobie sprawę, że to stare pytanie, ale myślę, że znalazłem na nie dobre rozwiązanie. Problem polega na tym, że fantazyjne pudełko zmienia wartość przepełnienia treści, aby ukryć paski przewijania przeglądarki.

Jak wskazuje Dave Kiss, możemy powstrzymać fantazyjny box przed zrobieniem tego poprzez dodanie następujących parametrów:

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

Ale teraz możemy przewijać stronę główną, patrząc na nasze fantazyjne okno. Jest to lepsze niż przeskakiwanie na górę strony, ale prawdopodobnie nie jest to to, czego naprawdę chcemy.

Możemy zapobiec przewijaniu w odpowiedni sposób, dodając kolejne parametry:

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

I dodaj te funkcje z galambalaz. Zobacz: Jak tymczasowo wyłączyć przewijanie?

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

— Joeran
źródło

9

Problem polega na tym, że fancyBox zmienia wartość przepełnienia body, aby ukryć paski przewijania przeglądarki. Nie mogłem znaleźć opcji przełączania tego zachowania.

Możesz usunąć tę sekcję z kodu fancyBox, aby temu zapobiec:

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

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

— jordanj77
źródło

YAY! Z tego powodu moja strona przeskakiwała wtedy o 20 pikseli w lewo. Dzięki! Rozwiązałeś 2 moje problemy!

— szeryfderek

Są tam paski przewijania ... ale zawsze używam overflow-y: scroll; w każdym razie, więc to dla mnie sprawiedliwy kompromis.

— szeryfderek

Myślę, że zablokowałoby to funkcjonalność kółka myszy - będę nadal szukał innych rozwiązań. Ale jak powiedziałem, na razie to działa!

— szeryfderek

3

Jeśli używasz fancybox v2.1.5, wydaje się, że problem został rozwiązany w najnowszej wersji master, którą możesz pobrać tutaj github.com/fancyapps/fancyBox/archive/master.zip, więc nie ma więcej hacków do plików js lub css .

— JFK

1

To była najlepsza odpowiedź w tamtym czasie ... a jeśli z jakiegoś powodu masz starszą witrynę lub coś w tym rodzaju - potraktuj to jako odniesienie.

— szeryfderek

6

Pomimo tego, że właściwym sposobem rozwiązania tego problemu są opcje, które dostarcza fancybox ( patrz odpowiedź ), CSS mógłby zostać użyty do rozwiązania problemu. Nie ma potrzeby edytowania pliku css biblioteki, wystarczy dodać to do głównego arkusza stylów aplikacji:

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

Kod resetuje oryginalne przepełnienie elementu. Problem polega na tym, że overflow: hidden;ukrywa pasek przewijania na <html>elemencie, co powoduje, że strona „przeskakuje” na górę. Aby zachować położenie paska przewijania, nadpisujemy przepełnienie znakiemoverflow: visible;

— thexpand
źródło

Innym powodem, dla którego może się to zdarzyć, jest to, że <body>lub / i <html>mogąheight: 100%

— rozszerzyć się

4

To też pomogło

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

— hsobhy
źródło

1

Nadpisywanie stylów osób trzecich nie jest dobrym pomysłem, zwłaszcza jeśli musisz użyć! Ważnego modyfikatora, aby przerwać kaskadę. Zachęcam wszystkich do skorzystania z poprawki dostarczonej przez Dave Kiss powyżej, a nie tej.

— Fabian Schöner,

1

Przyjęta odpowiedź nie jest kompletna, ponieważ w rzeczywistości nie rozwiązuje problemu, po prostu go unika! Oto pełniejsza odpowiedź, która faktycznie zapewnia pożądaną funkcjonalność podczas rozwiązywania problemu przeskakiwania okien:

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

— Ian
źródło

0

Może ta odpowiedź jest całkiem spóźniona, ale może mogłaby pomóc w przyszłości, jeśli po kliknięciu / zamknięciu fancybox obrazu spowoduje przewijanie witryny do góry, możesz po prostu usunąć:

F.trigger('onReady');

lub lepiej użyć:

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

W wersji fancyBox: 2.1.5 (piątek, 14 czerwca 2013) ta część kodu znajduje się w linii 897.

— Nahomy Atias
źródło

0

Możesz faktycznie kodować w ten sposób, jeśli używasz domyślnej funkcji fancybox:

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

— Steele Rocky
źródło

-4

Naprawiłem to za pomocą:

overflow: hidden !important;

w .fancybox-lockciele w jquery.fancybox.css. I pasek przewijania nie skacze :)

— user2684988
źródło

4

Tak powiedział szybki refleks mniej więcej miesiąc temu.

— BoltClock