wie man Scrollen der Seite hinter fancybox-2 verhindert

Question

Wir verwenden fancybox2 für die Anzeige von Bildern. Alles funktioniert gut, aber wenn das größere Bild in der Fancybox angezeigt wird, scrollt die Seite nach oben. Nach dem Schließen der Fancybox muss der Benutzer zurück nach unten scrollen, bis er die Box öffnet. Die Beispiele auf der fancybox2 Site zeigen dieses Verhalten nicht. Ich konnte nicht herausfinden, wo der Unterschied liegt, um dies zu erreichen.

fancyOptions = { 
    type: 'image', 
    closeBtn: false, 
    autoSize: false, 
    scrolling: 'no', 
    type: 'image', 
    padding: [10,10,10,10], 
    beforeLoad: function(){ 
    this.title = getTitle(this); 
    this.href = $(this.element).closest('a').attr('href'); 
    }, 
    helpers: { 
    overlay: { 
     css: { 
     'background': 'rgba(0, 0, 0, 0.7)' 
     }, 
    }, 
    title: { 
     type: 'inside' 
    } 
    } 
}; 

Wir verwenden fancybox2 als Modul in require.js. Der Aufruf von .fancybox() befindet sich in einem $ (document) .ready-Block.

Es wird 2 Scrollbar und ich verstecken man mit css

.fancybox-overlay { 
overflow: hidden !important; 
} 

Answer 1

du versuchen können: -

beforeShow: function(){ 
$("body").css({'overflow-y':'hidden'}); 
}, 

afterClose: function(){ 
$("body").css({'overflow-y':'visible'}); 

} 

Es stoppt das vertikale Scrollen auf der übergeordneten Seite während fancybox geöffnet ist.

Answer 2

Meine Schätzung? Der Selektor klicken, um fancybox zu Feuer ist höchstwahrscheinlich ein Anker mit einem hashmark wie:

<a href="#"> 

dann erhalten Sie die fancybox der href vom nächsten <a> Elemente, wie in Ihrem Code:

beforeLoad: function(){ 
    this.title = getTitle(this); 
    this.href = $(this.element).closest('a').attr('href'); 
    } 

Hier is a DEMO reproduziert das Verhalten, das Sie beschreiben (scrollen Sie den Inhalt nach unten, bis Sie die Miniatur finden, die fancybox auslöst)

Wenn das, was ich oben angenommen habe, korrekt ist, dann sind Ihre möglichen Lösungen:

1). Ändern Sie den hashmark in Ihrem Sanker href Attribut auf den hashtag#nogo wie <a href="#nogo">

wie Stuart Nicholls (cssplay) in seinem Update vom 15. März 2005 in den verlinkten Beitrag bezeichnet.

2). Oder tauschen Sie die hashmark in Ihrem Sanker href Attribut von javascript:; wie <a href="javascript:;">

Siehe updated JSFIDDLE die erste Option.

Answer 3

Das ist für mich gearbeitet:

$.fancybox({ 
     scrolling : 'hidden', 
     helpers: { 
      overlay: { 
       locked: true 
      } 
     }); 

Hoffe, es hilft :)

Answer 4

Offenbar ändert Fancybox die CSS-Eigenschaft overflow auf body Element hidden, wenn ein Bild gezeigt wird. Dies bewirkt, dass der Hintergrund zurück zum Anfang blättert. Alles, was Sie tun müssen, ist die Zeile overflow: hidden !important; im Abschnitt .fancybox-lock im Stylesheet jquery.fancybox.css zu kommentieren.

Siehe auch fancybox2/fancybox causes page to to jump to the top.

Answer 5

In jquery.fancybox.css -> .fancybox-lock
Änderung:
overflow: hidden !important;
zu:
overflow: visible !important;
Werke für mich :)

Answer 6

ich diese Frage klar eine Weile aufgefordert wurde, Vor, aber ich denke, ich habe eine gute Lösung dafür gefunden. Das Problem ist, dass Phantasie-Box den Überlauf-Wert des Körpers ändert, um die Browser-Bildlaufleisten zu verbergen.

Wie SimCity weist darauf hin, können wir fancy box stoppen dies zu tun, indem Sie die folgenden Parameter angeben:

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

Aber jetzt können wir die Haupt-Seite blättern, während unsere fancy box Fenster. Es ist besser, als zum Anfang der Seite zu springen, aber es ist wahrscheinlich nicht das, was wir wirklich wollen.

können wir verhindern, dass der richtige Weg Scrollen durch die nächsten Parameter ergänzt:

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

Und diese Funktionen von galambalaz hinzuzufügen. Siehe: How to disable scrolling temporarily?

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

Answer 7

Dies funktioniert gut für mich:

hinzufügen Folgefunktionen in facnybox Initialisierung

beforeShow: function(){ 
    $("body").css({'overflow-y':'hidden'}); 
}, 
afterClose: function(){ 
    $("body").css({'overflow-y':'visible'}); 
} 

Beispiel:

$(".fancyBoxTrigger").fancybox({ 
    maxWidth : 820, 
    maxHeight : 670, 
    fitToView : false, 
    width  : 760, 
    height  : 580, 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    padding  : 10, 
    closeBtn : false, 
    beforeShow: function(){ 
     $("body").css({'overflow-y':'hidden'}); 
    }, 
    afterClose: function(){ 
     $("body").css({'overflow-y':'visible'}); 
    }, 
    helpers : { 
     overlay : { 
      opacity: 0.4, 
      locked: false 
     } 
    } 
}); 

Ich hoffe, es wird für Sie arbeiten .

Answer 8

Meine Modifikation, helfen diese mir

/* Fancybox */ 
$('.fancybox').fancybox({ 
    beforeShow: function(){ 
     $("body").css({ 
      "overflow-y": "hidden", 
      "position": "fixed" 
      } 
     ); 
    }, 
    afterClose: function(){ 
     $("body").removeAttr("style"); 
    } 
}); 

Answer 9

$('.fancybox').fancybox({ 
'beforeLoad': function(){ 
    disable_scroll(); 
    }, 
'afterClose': function(){ 
    enable_scroll(); 
    } 
}); 

var disabled_scroll = false; 

function disable_scroll() { 
    disabled_scroll = true; 
} 

function enable_scroll() { 
    disabled_scroll = false; 
} 

in fullPage.js

function scrollPage(element, callback, isMovementUp) 
{ 
    if(disabled_scroll) return; 
    ..... 
}