fancybox2 / fancybox, sayfanın en üste atlamasına neden olur

105

Bir dev sitesinde fancybox2 uyguladım.

Fantezi kutucuğunu devreye aldığımda (bağlantıya tıkladığımda vb.) Tüm html arkasına geçer ve en üste gider. Başka bir demoda iyi çalışıyor, ancak aynı kodu bu projeye sürüklediğimde en üste atlıyor. Yalnızca satır içi div'lere bağlantılarla değil, aynı zamanda basit resim galerisi için de.

Bunu deneyimleyen oldu mu?

jquery css fancybox-2

— Şerifderek
kaynak

not: Bunu ipad ve iphone'da kontrol ettim ve bu sorun oluşmuyor ... ancak krom ve firefox'ta.

— sheriffderek

1

Fancybox v2.1.5 kullanıyorsanız, sorunun en son ana bilgisayarda düzeltildiği anlaşılıyor, buradan formu buradan indirebilirsiniz: github.com/fancyapps/fancyBox/archive/master.zip, böylece js veya css dosyalarına daha fazla hack yok .

— JFK

331

Bu aslında Fancybox 2'de bir yardımcı ile yapılabilir.

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

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

— Dave Öpücük
kaynak

11

Bunu yapmanın kesinlikle yolu budur. OP bunu kabul edilen cevap olarak işaretlemelidir. Bunun için teşekkür ederim!

— 2013

Tamamen katılıyorum. Kabul edilen cevap (fancybox2'den kodu kaldırmak için) bir hack'tir.

— Rob Gonzalez

Ne yazık ki, kabul edilen yanıt tam bir yıl içinde değiştirilmemiş. Umarım gelecekteki kullanıcılar "kodu eklentiden çıkar" cevabını değil bunu uygular.

— AndyWarren

5

Bu cevabın sorunu çözmediğini düşünüyorum. Pek çok kişi , fancybox'ın arkasındaki içeriği kaydırmaktan hoşlanmayabilir ( lockedolarak ayarlanırsa bu olur false.) Bu, bazı senaryolar için başka bir sorun yaratabilecek bir soruna geçici bir çözümdür. Bu bir hataydı

— JFK

1

@JFK Bu düzeltmenin kaydırma nedeniyle gerçekten ideal olmayabileceğini kabul ediyorum, ancak bunu en son kalıpla test ettim ve sayfa hala en üste atlıyor. Yine de fantezi kutusu kapatıldığında orijinal konumuna geri döner.

— Bay Jonny Wood

35

Jordanj77 doğru ama en kolay çözüm stil sayfasına gidip bölümdeki jquery.fancybox.csssatırı yorumlamaktır.overflow: hidden !important;.fancybox-lock

— hızlı refleksler
kaynak

4

Bu yardımcı kullanmaktan daha iyidir çünkü yardımcı ile sayfa, fare tekerleği ile yer paylaşımının altına kaydırmaya devam eder. Taşma hakkında yorum yapmak, atlamasını engeller ancak kaydırma çubuğu yine de ana sayfa için kilitlidir.

— Panama Jack

14

Bunun eski bir soru olduğunun farkındayım, ancak bunun için iyi bir çözüm bulduğumu düşünüyorum. Sorun, süslü kutunun tarayıcı kaydırma çubuklarını gizlemek için gövdenin taşma değerini değiştirmesidir.

Dave Kiss'in belirttiği gibi, aşağıdaki parametreleri ekleyerek fantezi kutusunun bunu yapmasını durdurabiliriz:

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

Ancak artık süslü kutu penceremize bakarken ana sayfayı kaydırabiliriz. Sayfanın en üstüne atlamaktan daha iyidir, ancak muhtemelen istediğimiz şey bu değildir.

Sonraki parametreleri ekleyerek doğru şekilde kaydırmayı engelleyebiliriz:

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

Ve bu fonksiyonları galambalaz'dan ekleyin. Bkz: Kaydırmayı geçici olarak nasıl devre dışı bırakabilirim?

    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
kaynak

9

Sorun, fancyBox'ın tarayıcı kaydırma çubuklarını gizlemek için gövdenin taşma değerini değiştirmesidir. Bu davranışı değiştirmek için bir seçenek bulamadım.

Bunu önlemek için fancyBox kodunun bu bölümünü kaldırabilirsiniz:

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

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

— Ürdün
kaynak

YAŞASIN! O zamanlar sayfamın 20px sola atlamasının nedeni de buydu. Teşekkürler! 2 problemimi çözdün!

— sheriffderek

Kaydırma çubukları orada ... ama ben her zaman overflow-y: scroll kullanırım; her neyse, bu benim için adil bir değiş tokuş.

— sheriffderek

Sanırım bu fare tekerleği işlevselliğini engelleyecektir - başka çözümler de aramaya devam edeceğim. Ama dediğim gibi, şimdilik hile yapıyor!

— sheriffderek

3

Fancybox v2.1.5 kullanıyorsanız, sorunun en son ana bilgisayarda düzeltildiği anlaşılıyor, buradan formu buradan indirebilirsiniz: github.com/fancyapps/fancyBox/archive/master.zip, böylece js veya css dosyalarına daha fazla hack yok .

— JFK

1

O zamanlar en iyi cevap buydu ... ve herhangi bir nedenle eski bir siteniz veya başka bir şeyiniz varsa - bunu referans olarak görün.

— sheriffderek

6

Bu sorunu çözmenin doğru yolu, fancybox'ın sağladığı seçenekler ( bu yanıta bakın ) olmasına rağmen, sorunu çözmek için CSS kullanılabilir. Kitaplığın css dosyasını düzenlemeye gerek yoktur, bunu uygulamanın ana stil sayfasına eklemeniz yeterlidir:

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

Kod, öğenin orijinal taşmasını sıfırlar. Sorun, sayfanın en üste "atlamasına" neden olan öğe overflow: hidden;üzerindeki kaydırma çubuğunu gizlemesidir <html>. Kaydırma çubuğunun konumunu korumak için taşmanın üzerine yazıyoruzoverflow: visible;

— genişleme
kaynak

Bunun olmasının bir başka nedeni de <body>veya / ve <html>olabilirheight: 100%

— thexpand

4

Bu da yardımcı oldu

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

— hsobhy
kaynak

1

3. taraf stillerinin üzerine yazmak, özellikle kademeyi kırmak için önemli bir değiştirici kullanmanız gerekiyorsa, iyi bir fikir değildir. Herkesi yukarıda Dave Kiss tarafından sağlanan düzeltmeyi kullanmaya teşvik ediyorum, bunu değil.

— Fabian Schöner

1

Kabul edilen cevap tam değildir çünkü problemi gerçekten çözmez, sadece ondan kaçınır! İşte size pencere atlama sorununu düzeltirken aslında istediğiniz işlevselliği veren daha eksiksiz bir cevap:

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

0

Belki bu cevap çok geç olabilir, ancak gelecekte yardımcı olabilir, bir resmi süslü kutuyu kapattıktan / kapattıktan sonra web sitenizi en üste kaydırırsanız, şunları silebilirsiniz:

F.trigger('onReady');

veya daha iyi kullanım:

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

FancyBox sürümünde: 2.1.5 (Cuma, 14 Haziran 2013) kodun bu bölümü 897. satırdadır.

— Nahomy Atias
kaynak

0

Fantasybox varsayılan işlevini kullanıyorsanız aslında şu şekilde kodlayabilirsiniz:

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

— Steele Rocky
kaynak

-4

Şununla düzelttim:

overflow: hidden !important;

içinde .fancybox-lockvücut jquery.fancybox.css. Ve kaydırma çubuğu atlamıyor :)

— kullanıcı2684988
kaynak

4

Hızlı reflekslerin yaklaşık bir ay önce söylediği buydu.

— BoltClock