फैंसीबॉक्स 2 / फैंसीबॉक्स पृष्ठ को शीर्ष पर कूदने का कारण बनता है

Question

मैंने एक फैंसी साइट पर फैंसीबॉक्स 2 को लागू किया है।

जब मैं फैंसीबॉक्स (लिंक आदि पर क्लिक करता हूं) को संलग्न करता हूं तो पूरा html इसके पीछे शिफ्ट हो जाता है - और शीर्ष पर चला जाता है। मेरे पास एक और डेमो में काम करना ठीक है, लेकिन जब मैं इस कोड को एक ही कोड को खींचता हूं तो यह शीर्ष पर पहुंच जाता है। न केवल इनलाइन divs के लिंक के साथ, बल्कि सरल छवि गैलरी के लिए भी।

क्या किसी ने यह अनुभव किया है?

Comments

नोट: मैंने अभी-अभी iphone पर ipad को चेक किया है और यह समस्या उत्पन्न नहीं हो रही है ... हालाँकि यह क्रोम और फ़ायरफ़ॉक्स में है।

— शेरिफेरेरेक

आप fancybox v2.1.5 उपयोग कर रहे हैं ऐसा लगता है कि इस मुद्दे को नवीनतम मास्टर आप फार्म यहाँ डाउनलोड कर सकते हैं कि में तय किया गया है github.com/fancyapps/fancyBox/archive/master.zip तो या तो js या सीएसएस फ़ाइलों के लिए कोई और अधिक हैक्स ।

— JFK

Answer 1

यह वास्तव में फैंसीबॉक्स 2 में एक सहायक के साथ किया जा सकता है।

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

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

Comments

यह निश्चित रूप से इसे करने का तरीका है। ओपी ने इसे स्वीकृत उत्तर के रूप में चिन्हित किया। इसके लिए शुक्रिया!

— cfx

पूर्णतया सहमत। स्वीकृत उत्तर (फैंसीबॉक्स 2 से कोड हटाने के लिए) एक हैक है।

— रोब गोंजालेज

इसके दुर्भाग्यपूर्ण स्वीकार किए गए उत्तर को एक पूरे वर्ष में नहीं बदला गया है। आशा है कि भविष्य के उपयोगकर्ता इसे लागू करते हैं और "प्लगइन से बाहर काट कोड" उत्तर नहीं।

— एंडीवरेन

मुझे लगता है कि यह उत्तर समस्या का समाधान नहीं करता है। बहुत से लोग फैंसीबॉक्स के पीछे सामग्री को स्क्रॉल करने में सक्षम होना पसंद नहीं कर सकते हैं (यह क्या होगा अगर lockedसेट किया गया है false।) यह एक समस्या का एक अस्थायी समाधान है जो कुछ परिदृश्यों के लिए दूसरा बना सकता है। यह एक बग था और इसे नवीनतम मास्टर github.com/fancyapps/fancyBox/archive/master.zip

— JFK

@ जेएफके मैं सहमत हूं कि स्क्रॉल के कारण यह फिक्स वास्तव में आदर्श नहीं हो सकता है, लेकिन मैंने इसे नवीनतम मास्टर के साथ परीक्षण किया है और पृष्ठ अभी भी शीर्ष पर कूदता है। हालांकि यह मूल स्थिति में वापस आ जाता है जब फैंसीबॉक्स बंद हो जाता है।

— श्री जॉनी वुड

Answer 2

जार्डन77 सही है लेकिन सबसे आसान उपाय है कि आप स्टाइलशीट पर जाएं jquery.fancybox.cssऔर overflow: hidden !important;अनुभाग में पंक्ति कहकर टिप्पणी करें.fancybox-lock

Comments

यह सहायक का उपयोग करने से बेहतर है क्योंकि सहायक के साथ पृष्ठ माउस व्हील के साथ ओवरले के नीचे स्क्रॉल करना जारी रखता है। ओवरफ्लो की टिप्पणी करने से यह उछलता रहता है लेकिन स्क्रॉलबार अभी भी मुख्य पृष्ठ के लिए बंद है।

— पनामा जैक

Answer 3

मुझे लगता है कि यह एक पुराना सवाल है, लेकिन मुझे लगता है कि मुझे इसके लिए एक अच्छा समाधान मिल गया है। समस्या यह है कि फैंसी बॉक्स बॉडी के ओवरफ्लो वैल्यू को बदल देता है ताकि ब्राउजर स्क्रॉलबार छुप सके।

डेव चुंबन बताते हैं, हम निम्न पैरामीटर जोड़कर ऐसा करने से फैंसी बॉक्स बंद कर सकते हैं:

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

लेकिन, अब हम अपने फैंसी बॉक्स विंडो को देखते हुए मुख्य पृष्ठ को स्क्रॉल कर सकते हैं। यह पृष्ठ के शीर्ष पर कूदने से बेहतर है, लेकिन यह शायद वह नहीं है जो हम वास्तव में चाहते हैं।

हम अगले मापदंडों को जोड़कर सही तरीके से स्क्रॉल करने से रोक सकते हैं:

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

और इन कार्यों को गैलमबलाज़ से जोड़ें। देखें: अस्थायी रूप से स्क्रॉलिंग को अक्षम कैसे करें?

    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 4

समस्या यह है कि फैंसीबॉक्स शरीर के ओवरफ्लो मूल्य को बदल देता है ताकि ब्राउजर स्क्रॉलबार को छिपाया जा सके। मुझे इस व्यवहार को टॉगल करने का विकल्प नहीं मिला।

आप इसे रोकने के लिए फैंसीबॉक्स कोड के इस भाग को निकाल सकते हैं:

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

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

Comments

वाह! यही कारण है कि मेरा पेज बाईं ओर 20px उछल रहा था। धन्यवाद! आपने मेरी 2 समस्याओं का समाधान किया!

— शेरिफडेरेक

स्क्रॉल बार हैं ... लेकिन मैं हमेशा ओवरफ्लो-वाई का उपयोग करता हूं: स्क्रॉल; वैसे भी, तो यह मेरे लिए एक उचित व्यापार है।

— शेरिफडेरेक

मुझे लगता है कि माउस-व्हील की कार्यक्षमता को अवरुद्ध करेगा - मैं अन्य समाधानों के लिए भी देखता रहूंगा। लेकिन जैसा मैंने कहा, यह अभी के लिए चाल चल रहा है!

— शेरिफडेरेक

आप fancybox v2.1.5 उपयोग कर रहे हैं ऐसा लगता है कि इस मुद्दे को नवीनतम मास्टर आप फार्म यहाँ डाउनलोड कर सकते हैं कि में तय किया गया है github.com/fancyapps/fancyBox/archive/master.zip तो या तो js या सीएसएस फ़ाइलों के लिए कोई और अधिक हैक्स ।

— JFK

यह उस समय सबसे अच्छा जवाब था ... और अगर किसी कारण से आपके पास विरासत साइट या कुछ है --- तो इसे कुछ संदर्भ के रूप में देखें।

— शेरिफडेरेक

Answer 5

इस तथ्य के बावजूद, कि इस समस्या को हल करने का उचित तरीका विकल्पों के माध्यम से है, जो फैंसीबॉक्स प्रदान करता है ( इस उत्तर को देखें ), सीएसएस का उपयोग समस्या को हल करने के लिए किया जा सकता है। लाइब्रेरी की सीएसएस फ़ाइल को संपादित करने की कोई आवश्यकता नहीं है, बस इसे एप्लिकेशन की मुख्य स्टाइलशीट में जोड़ें:

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

कोड तत्व के मूल अतिप्रवाह को रीसेट करता है। समस्या यह है कि overflow: hidden;स्क्रॉलबार को <html>तत्व पर छुपाता है , जिससे पृष्ठ शीर्ष पर "कूद" जाता है। स्क्रॉलबार की स्थिति को बनाए रखने के लिए, हम ओवरफ्लो को ओवरराइट कर देते हैंoverflow: visible;

Comments

ऐसा होने का एक और कारण हो सकता है क्योंकि <body>या / और <html>हो सकता हैheight: 100%

— Thexpand

Answer 6

इससे भी मदद मिली

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

Comments

अधिलेखित 3 वाँ शैली एक अच्छा विचार नहीं है खासकर यदि आपको कैस्केड को तोड़ने के लिए एक महत्वपूर्ण संशोधक का उपयोग करना है। मैं डेव द्वारा प्रदान की ठीक उपयोग करने के लिए प्रोत्साहित करते हैं इसके बाद के संस्करण यह एक नहीं चुंबन,।

— फेबियन शॉनर

Answer 7

स्वीकृत उत्तर पूर्ण नहीं है क्योंकि यह वास्तव में उस समस्या को हल नहीं करता है जो इसे अभी टालता है! यहाँ एक और अधिक पूर्ण उत्तर है जो वास्तव में आपको विंडो जम्प समस्या को हल करते समय वांछित कार्यक्षमता प्रदान करता है:

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

Answer 8

हो सकता है कि यह उत्तर देर से सही हो, लेकिन हो सकता है कि यह भविष्य में मदद कर सके, अगर किसी इमेज फैंसीबॉक्स को क्लिंक करने / बंद करने के बाद आपकी वेबसाइट शीर्ष पर स्क्रॉल हो जाए, तो आप बस इसे हटा सकते हैं:

F.trigger('onReady');

या बेहतर उपयोग:

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

फैंसीबॉक्स संस्करण में: 2.1.5 (शुक्र, 14 जून 2013) कोड का हिस्सा 897 पर है।

Answer 9

आप वास्तव में इस तरह से कोड कर सकते हैं यदि आप फैंसीबॉक्स डिफ़ॉल्ट फ़ंक्शन का उपयोग कर रहे हैं:

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

Answer 10

मैंने इसे ठीक किया:

overflow: hidden !important; 

में .fancybox-lockशरीर में jquery.fancybox.css। और स्क्रॉलबार कूद नहीं रहा है :)

Comments

यही कारण है कि फास्ट-रिफ्लेक्सिस ने लगभग एक महीने पहले कहा था।

— BoltClock