नैनोस्क्रॉलर खुद को ट्रिगर नहीं कर रहा है

Question

नीचे दिया गया कोड pane और slider के अनुसार display सीएसएस गुणों को ट्रिगर करने में सक्षम होना चाहिए। हालांकि, स्क्रॉलर slider नहीं दिखाता है जब तक कि मैं ब्राउज़र में कुछ क्रिया नहीं करता जैसे कि फ़ायरअप फ़ायरबग पर F12 दबाकर या इसका निरीक्षण करने के लिए अंदर किसी तत्व को दायाँ क्लिक करना। संभवतः गलत क्या हो सकता है?

 $(".nano").nanoScroller({ 
     alwaysVisible: true, 
     scroll: "bottom"  
    }); 

Answer 1

Nanoscroller को गति प्रदान करने के बाद कि सभी सामग्री लोड किया गया है सुनिश्चित करें; जैसे पेज के निचले हिस्से में ऊपर दिए गए कोड को डालने का प्रयास करें, या यह जांचने के लिए कि कुछ पृष्ठ लोडिंग सामग्री समाप्त हो गई है, कुछ JQuery कोड डालने का प्रयास करें।

Answer 2

मेरी समस्या आपके साथ समान है। शायद समस्या उत्पन्न होती है क्योंकि मैं गतिशील रूप से जेनरेट की गई सामग्री पर नैनोस्क्रॉलर फ़ंक्शन लागू करता हूं। मेरा समाधान निम्न पंक्ति को जोड़ना है:

$ ("। फलक")। सीएसएस ("प्रदर्शन", "ब्लॉक"); $ ("स्लाइडर")। सीएसएस ("प्रदर्शन", "ब्लॉक");

और फिर समस्या चली गई! आप Chrome में "तत्व का निरीक्षण" समारोह द्वारा पृष्ठ की जाँच हैं, तो आप .pane वर्ग जो स्क्रोलर (स्लाइडर) मौजूद है दिखाने के देख सकते हैं कि

शैली = "प्रदर्शन: कोई नहीं"

मैं उम्मीद है कि यह आपकी मदद करेगा।

Answer 3

यह समस्या तब दिखाई देती है जब नैनोस्क्रोलर तत्व के लिए प्रारंभ करने में विफल रहता है।

सुनिश्चित करें कि कक्षा नैनो वाला तत्व मूल तत्व के भीतर नहीं है जो display:none सीएसएस संपत्ति के साथ छिपा हुआ है।

यदि सामग्री दिखाई नहीं देता एक अन्य मामले , आपको यह सुनिश्चित उचित ऊंचाई तत्व वर्ग नैनो होने के लिए स्थापित किया गया है बनाने के लिए चाहते हैं।

Answer 4

कुछ मामलों में, मेरे जैसे, नैनोस्क्रॉलर को चित्र की चौड़ाई/ऊंचाई को ठीक से काम करने के लिए पहले पता होना चाहिए।

मैं इसे कैसे तय:

इसके बजाय, .ready हैंडलर बिना फ़ंक्शन को कॉल, साथ/के

$(".nano").nanoScroller({ 
    alwaysVisible: true, 
    scroll: "bottom"  
}); 

.load हैंडलर का प्रयास करें। अब JQuery केवल नैनोस्क्रॉलर लोड करता है जब चित्रों की चौड़ाई/ऊंचाई ज्ञात होती है।

$(window).load(function() { 
    $(".nano").nanoScroller({ 
     alwaysVisible: true, 
     scroll: "bottom"  
    }); 
}); 

Answer 5

कोड (jquery.nanoscroller.js)

if ((content.scrollHeight === content.clientHeight) || (this.pane.outerHeight(true) >= content.scrollHeight && contentStyleOverflowY !== SCROLL)) { 
    this.pane.hide(); 
    /*this.isActive = false;*/ 
} else if (this.el.clientHeight === content.scrollHeight && contentStyleOverflowY === SCROLL) { 
    this.slider.hide(); 
} else { 
    this.slider.show(); 
} 

Answer 6

यह कम से कम संस्करण v0.7.4 पर की तरह लग रहा है, तो आप प्लग-इन का आरंभीकरण तर्क के साथ nanoScroller() फोन विफल हो सकता है ठीक करें , सभी गतिशील सामग्री के साथ।

यदि आप $('#yourDiv').animate() का उपयोग कर रहे हैं तो सुनिश्चित करें कि एनीमेशन समाप्त होने पर nanoScroller() पर कॉल किया गया है। वही यदि आप $.getJSON() का उपयोग कर रहे हैं, तो सामग्री ठीक से प्राप्त होने के बाद करें। यदि आप दोनों घटनाओं के बाद animate() और getJSON()nanoScroller() पर कॉल कर रहे हैं क्योंकि यह अनजान है कि कौन सी प्रक्रिया पहले खत्म हो रही है और nanoScroller() पर कई कॉल कुछ भी खराब नहीं होंगे।

और यहां वर्कअराउंड है: बिना किसी तर्क के पहले nanoScroller() पर कॉल करें और यदि आपको तर्क की आवश्यकता है तो इसे फिर से कॉल करने के बाद सही करें।

$('.nano').nanoScroller(); 
$('.nano').nanoScroller({ alwaysVisible: true, scroll: 'top' }); 

Answer 7

यदि आप सामग्री को गतिशील रूप से लोड कर रहे हैं, तो सामग्री को लोड होने के बाद ही आपको नैनोस्क्रॉलर प्रारंभ करना होगा।

इस तरह के सेटटाइमआउट में नैनोस्क्रॉलर प्रारंभिकता को संलग्न करने का प्रयास करें।

setTimeout(function(){ 
    $('.nano').nanoScroller({ flashDelay: 1000 }); 
}, 0); 

मुझे एक ही समस्या थी, यह मेरे लिए हल हो गई।

Answer 8

यह समाधान सभी मामलों की स्थिति में एक आकर्षण की तरह काम करता है यदि आपकी सामग्री का आकार बदलता है या नहीं। इसे आज़माएं:

$('your div id here').mouseover(function(){ 
    $('.nano').nanoScroller(); 
});