fancybox2 / fancybox menyebabkan halaman melompat ke atas

105

Saya telah menerapkan fancybox2 di situs dev.

Ketika saya menggunakan fancybox (klik tautan dll), seluruh html bergeser di belakangnya - dan pergi ke atas. Saya membuatnya berfungsi dengan baik di demo lain, tetapi ketika saya menyeret kode yang sama ke proyek ini, kode itu melompat ke atas. Tidak hanya dengan link ke divs inline, tetapi juga untuk galeri gambar sederhana.

Apakah ada yang mengalami ini?

jquery css fancybox-2 sheriffderek
sumber
catatan: Saya baru saja memeriksa ini di ipad dan iphone dan masalah ini tidak terjadi ... namun di chrome dan firefox.
sheriffderek
1
Jika Anda menggunakan fancybox v2.1.5 tampaknya masalah telah diperbaiki di master terbaru sehingga Anda dapat mengunduh formulir di sini github.com/fancyapps/fancyBox/archive/master.zip jadi tidak ada lagi peretasan baik ke file js atau css .
JFK

Jawaban:

331

Ini sebenarnya bisa dilakukan dengan pembantu di Fancybox 2.

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

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

Dave Kiss
sumber
11
Ini pasti cara untuk melakukannya. OP harus menandai ini sebagai jawaban yang diterima. Terima kasih untuk ini!
cfx
Setuju. Jawaban yang diterima (untuk menghapus kode dari fancybox2) adalah retasan.
Rob Gonzalez
Sayangnya jawaban yang diterima belum berubah dalam setahun penuh. Semoga pengguna di masa mendatang menerapkan ini dan bukan jawaban "potong kode dari plugin".
AndyWarren
5
Saya pikir jawaban ini tidak menyelesaikan masalah. Banyak orang mungkin tidak suka menggulir konten di belakang fancybox (ini yang akan terjadi jika lockeddiatur ke false.) Ini adalah solusi sementara untuk masalah yang dapat menimbulkan masalah lain untuk beberapa skenario. Ini adalah bug dan telah diperbaiki di master terbaru github.com/fancyapps/fancyBox/archive/master.zip
JFK
1
@JFK Saya setuju bahwa perbaikan ini mungkin sebenarnya tidak ideal karena pengguliran, tetapi saya telah mengujinya dengan master terbaru dan halaman masih melompat ke atas. Itu kembali ke posisi semula ketika fancybox ditutup.
Tuan Jonny Wood
35

Jordanj77 benar tetapi solusi termudah adalah dengan pergi ke stylesheet jquery.fancybox.cssdan mengomentari baris yang mengatakan overflow: hidden !important;di bagian.fancybox-lock

refleks cepat
sumber
4
Ini lebih baik daripada menggunakan helper karena dengan helper halaman terus bergulir di bawah overlay dengan roda mouse. Mengomentari overflow membuatnya tidak melompat tetapi juga scrollbar masih terkunci untuk halaman utama.
Panama Jack
14

Saya menyadari ini adalah pertanyaan lama, tetapi saya rasa saya telah menemukan solusi yang baik untuk itu. Masalahnya adalah bahwa kotak mewah mengubah nilai luapan tubuh untuk menyembunyikan bilah gulir browser.

Seperti yang ditunjukkan Dave Kiss, kita dapat menghentikan kotak mewah dari melakukan ini dengan menambahkan parameter berikut:

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

Tapi, sekarang kita bisa menggulir halaman utama sambil melihat jendela kotak mewah kita. Ini lebih baik daripada melompat ke atas halaman, tetapi mungkin itu bukan yang sebenarnya kita inginkan.

Kita dapat mencegah pengguliran dengan cara yang benar dengan menambahkan parameter berikutnya:

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

Dan tambahkan fungsi-fungsi ini dari galambalaz. Lihat: Bagaimana cara menonaktifkan pengguliran sementara?

    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
sumber
9

Masalahnya adalah fancyBox mengubah nilai luapan tubuh untuk menyembunyikan bilah gulir browser. Saya tidak dapat menemukan opsi untuk mengubah perilaku ini.

Anda dapat menghapus bagian kode fancyBox ini untuk mencegahnya:

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

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
jordanj77
sumber
YAY! Itu juga mengapa halaman saya melompat 20px ke kiri. Terima kasih! Anda memecahkan 2 masalah saya!
sheriffderek
Scroll bar ada di sana ... tapi saya selalu menggunakan overflow-y: scroll; bagaimanapun, jadi ini pertukaran yang adil bagi saya.
sheriffderek
Saya rasa itu akan memblokir fungsionalitas roda mouse - saya akan terus mencari solusi lain juga. Tapi seperti yang saya katakan, ini melakukan trik untuk saat ini!
sheriffderek
3
Jika Anda menggunakan fancybox v2.1.5 tampaknya masalah telah diperbaiki di master terbaru sehingga Anda dapat mengunduh formulir di sini github.com/fancyapps/fancyBox/archive/master.zip jadi tidak ada lagi peretasan baik ke file js atau css .
JFK
1
Ini adalah jawaban terbaik pada saat itu ... dan jika karena alasan tertentu Anda memiliki situs lama atau semacamnya - lihat ini sebagai referensi.
sheriffderek
6

Terlepas dari kenyataan, bahwa cara yang tepat untuk menyelesaikan masalah ini adalah melalui opsi, yang disediakan fancybox ( lihat jawaban ini ), CSS dapat digunakan untuk menyelesaikan masalah. Tidak perlu mengedit file css perpustakaan, cukup tambahkan ini ke lembar gaya utama aplikasi:

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

Kode menyetel ulang luapan asli elemen. Masalahnya adalah bahwa overflow: hidden;scrollbar tersembunyi pada <html>elemen tersebut, yang menyebabkan halaman "melompat" ke atas. Untuk mempertahankan posisi scrollbar, kami menimpa overflow denganoverflow: visible;

thexpand
sumber
Alasan lain mengapa ini bisa terjadi adalah karena <body>atau / dan <html>mungkin memilikiheight: 100%
thexpand
4

Ini juga membantu

.fancybox-lock body {
    overflow: visible !important;
}
hsobhy
sumber
1
Menimpa gaya pihak ke-3 bukanlah ide yang baik terutama jika Anda harus menggunakan pengubah! Important untuk memutus kaskade. Saya mendorong semua orang untuk menggunakan perbaikan yang disediakan oleh Dave Kiss di atas, bukan yang ini.
Fabian Schöner
1

Jawaban yang diterima tidak lengkap karena tidak benar-benar menyelesaikan masalah, melainkan hanya menghindarinya! Berikut adalah jawaban yang lebih lengkap yang benar-benar memberi Anda fungsionalitas yang diinginkan saat memperbaiki masalah lompatan jendela: 

        $('.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
sumber
0

Mungkin jawaban ini sangat terlambat tapi mungkin bisa membantu di masa depan, jika setelah mengklik / menutup gambar fancybox membuat situs web Anda bergulir ke atas, Anda bisa menghapus:

F.trigger('onReady');

atau penggunaan yang lebih baik: 

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

Dalam versi fancyBox: 2.1.5 (Jum, 14 Jun 2013) bagian kode tersebut ada di baris 897.

Nahomy Atias
sumber
0

Anda sebenarnya dapat membuat kode seperti ini jika Anda menggunakan fungsi default fancybox:

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

Saya memperbaikinya dengan:

overflow: hidden !important;

di dalam .fancybox-locktubuh jquery.fancybox.css. Dan scrollbar tidak melompat :)

pengguna2684988
sumber
4
Itulah yang dikatakan fast-reflex sekitar sebulan yang lalu.
BoltClock