जब कोई फैंक्सबॉक्स 2 सक्रिय होता है, तो मूल पृष्ठ पर स्क्रॉलबार चमकता है जिससे सामग्री बाईं ओर स्थानांतरित हो जाती है और फिर

स्क्रॉलबार समस्या के आसपास काम करने के लिए कोई विचार कैसे होता है? जब भी मेरी साइट पर एक फैंक्सबॉक्स सक्रिय होता है तो यह प्रारंभ होने के दौरान एक स्क्रॉलबार बनाता है और फिर फिर से चमकता है - लेकिन यह पूरे पृष्ठ को एक दूसरे भाग के लिए बदल देता है। बहुत सुरुचिपूर्ण नहीं है!जब कोई फैंक्सबॉक्स 2 सक्रिय होता है, तो मूल पृष्ठ पर स्क्रॉलबार चमकता है जिससे सामग्री बाईं ओर स्थानांतरित हो जाती है और फिर

क्या यह Fancybox 2 के साथ एक बग है?

कोड Fancybox सक्रिय करने के लिए प्रयोग किया है:

$('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $.fancybox({ 
      'href' : url, 
      closeBtn : true, 
      width : '467', 
      height : '609', 
      fitToView : false, 
      padding : '5', 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
    });

स्रोत

2012-03-29 JayDee

सक्रिय करने के लिए जब क्लिक स्क्रॉल पट्टी सिर्फ अपने jQuery कोड

$("body").css("overflow","hidden"); // hide body scrollbar

और जब पास fancybox निम्नलिखित कोड जोड़ने में निम्न कोड जोड़ने

$("body").css("overflow","auto"); // show body scrollbar

स्रोत

2012-03-29 11:41:12

अच्छा समाधान, धन्यवाद। एक बग को ठीक करने के लिए एक समारोह के साथ सीएसएस को संशोधित करने के लिए बस एक शर्म की बात है! – JayDee

मुझे नहीं लगता कि एक बग है (आपको उस कथन को बनाने से पहले अधिक तत्व प्रदान करने की आवश्यकता होगी)। यह आपकी खुद की पेज सीएसएस सेटिंग्स (उदाहरण के लिए एक फ़्लोटिंग तत्व) होना चाहिए कि जब फैंक्सबॉक्स को 'बॉडी' में जोड़ा जाता है, तो यह शरीर की ऊंचाई में अतिरिक्त अंतर पैदा कर सकता है ताकि स्क्रॉल बार दिखाई दे। मैंने कभी ऐसा व्यवहार नहीं देखा है, इसलिए उपरोक्त कामकाज बहुत विशिष्ट है। – JFK

यह मेरे लिए काम करता है, क्योंकि मेरे पास एचपी जैसे एचटीएमएल/बॉडी पर 'ओवरफ्लो-वाई: स्क्रॉल' संपत्ति है, लेकिन संभवतः आप प्रभाव के दौरान गायब होने वाली दूसरी स्क्रॉलबार देख सकते हैं। यह आदर्श नहीं होगा कि यह कभी भी दिखाई दे। http://jsfiddle.net/NVHWw/ – RCNeil

सुनिश्चित करें कि आपका फैंक्सबॉक्स दो बार शुरू नहीं किया जा रहा है। मुझे दर्द का सामना करना पड़ा है और जब मैंने सोचा कि फैंक्सबॉक्स 2 में AJAX विंडोज़ के साथ बग था, तो यह कई बार शुरू करने के लिए मेरी गलती थी।

स्रोत

2012-07-05 02:28:19

क्या आप html { overflow-y: scroll; } का उपयोग करते हैं? यह फैंक्सबॉक्स के साथ संघर्ष करता है। Fancybox आपके body पर एक कक्षा जोड़ता है, जिसे .fancybox-lock कहा जाता है, जो सामग्री को 17px दाएं स्थानांतरित करता है।

स्क्रिप्ट ("fancybox-लॉक" वर्ग लगाने से) "शरीर" तत्व से स्क्रॉलबार दूर करता है और उसके बाद सामग्री स्थानांतरण से बचने के लिए मार्जिन जोड़कर उन्हें क्षतिपूर्ति।

तुम इतनी है कि यह ओवरराइड कर सकते हैं:

.fancybox-lock { margin: 0 !important; }

और अधिक पढ़ें: https://github.com/fancyapps/fancyBox/issues/340

स्रोत

2012-08-27 12:53:53 Nix

यह शायद ओपी का अनुभव कर रहा था, क्योंकि मैं खुद था। मेरे पास 'ओवरफ्लो-वाई: स्क्रॉल' सेट अप था, इसलिए यह दो बार क्यों दिखाई दिया। आईएमओ, यह सही जवाब होना चाहिए क्योंकि यह समस्या का मूल कारण है और इसे अनदेखा नहीं किया जाना चाहिए। – RCNeil

फैंसी बॉक्स 2 में सबसे अधिक समय स्क्रॉल पट्टी से पता चलता है, इस से बचने के लिए हम ऊंचाई और शरीर की चौड़ाई सेट करने के लिए , iframe में लोड करने के लिए

यानी, जरूरत है जो

<body style="height:300px;width:200px;overflow:hidden"> 
//body content come here 
</body>

यह एक विधि है, इस बग को हल करने के कुछ और तरीके होंगे।

स्रोत

2012-09-25 11:07:37 shihabudheen

संपादित निम्नलिखित स्थानों

.fancybox-lock { 
    overflow: hidden; 
}

में jquery.fancybox.css फ़ाइल

.fancybox-lock { 
    overflow: hidden; 
    margin-right:0 !important; <-- Add this 
}

और

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: scroll; 
}

हो जाता हो जाता है

स्रोत

2012-10-02 16:47:09 ajaykarwal

यह समस्या को फ़ायरफ़ॉक्स में ठीक नहीं करता है। यह सफारी में भी इसे शुरू करता है। – knorthfield

-1

संस्करण में: 2.1.1 लाइन 1743 - 1749 के बीच रेखा को हटा दें। खराब तरीका हाँ लेकिन काम करता है।^ _^

बदलें इस:

if (obj.fixed && !isTouch) { 
    if (obj.locked) { 
     this.el.addClass('fancybox-lock'); 
     if (this.margin !== false) { 
      $('body').css('margin-right', getScalar(this.margin) + obj.scrollbarWidth); 
     } 
    } 
} else { 
    this.update(); 
}

करने के लिए:

if (obj.fixed && !isTouch) { 

} else { 
    this.update(); 
}

स्रोत

2012-10-09 10:57:02 user1634982

बस विकल्पों के बगल में कोड जोड़ें:

helpers: { 
    overlay: { 
     locked: false 
    } 
}

स्रोत

2013-02-14 17:48:47 pheonix

यह असली समाधान है – Ruben

आईएमओ, यह असली जवाब भी है। हमें किसी भी अंतर्निहित सीएसएस को संशोधित करने की आवश्यकता नहीं है! +1 – Alex

यह मेरे लिए काम करता है (अन्य सुझाव नहीं थे) – scientiffic

बस एक मार्जिन जोड़ने की कोशिश। यह मेरी मदद की।

.fancybox-lock { 
    overflow: hidden !important; 
    width: auto; 
    margin-right: 20px; 
}

स्रोत

2014-06-03 15:49:55

उत्तर

संबंधित मुद्दे