Fullpage.js और मोबाइल डिवाइस: सामग्री ओवरफ़्लो सक्षम होने पर अनुभाग/स्लाइड स्विच को कैसे सक्षम करें?

Question

विकल्पों में से कुछ के साथ प्रयोग करने के बाद मैं अभी भी संतोषजनक परिणाम नहीं मिला:

इस्तेमाल किया जावास्क्रिप्ट पुस्तकालय FullpageJS (http://alvarotrigo.com/fullPage/)

है

Fullpage.js निम्न सेटिंग के साथ आरंभ नहीं हो जाता:

$('#fullpage').fullpage({ 
    sectionsColor: colors, 
    anchors: anchors, 
    scrollOverflow: true, 
    afterSlideLoad: function() { 
     startTheSliders(); 
    }, 
    onLeave: function(index) { 
     setTimeout(function() { 
      $.fn.fullpage.scrollSlider(index,0); 
     },1000); 
    } 
}); 

महत्वपूर्ण: प्रलेखन स्क्रॉलऑवरफ्लो के अनुसार: सत्य सेट है (और सत्य पर सेट होना चाहिए), क्योंकि विशेष रूप से मोबाइल उपकरणों पर स्लाइड की सामग्री स्क्रीन की ऊंचाई से अधिक होती है।

हालांकि यह बिल्कुल जरूरी है कि उपयोगकर्ता उंगली (नेविगेशन नहीं) के साथ स्लाइड्स के बीच क्षैतिज और लंबवत स्विच कर सकें। अभिप्रेत व्यवहार इस प्रकार है:

1. क्षैतिज स्विच स्विच स्लाइड अगर उंगली चाल बाएं या दाएं

2. कार्यक्षेत्र स्विच स्लाइड: अगली नीचे स्लाइड केवल तभी स्लाइड नीचे और उंगली को स्क्रॉल किया है नीचे ले जाता है। अगली शीर्ष स्लाइड: केवल अगर स्लाइड शीर्ष पर स्क्रॉल की जाती है और उंगली ऊपर जाती है।

देव परियोजना यहां पाया जा सकता: http://www.studiodankl.com/studiodankl/

Answer 1

समस्या वास्तव में fullpage.js के साथ कुछ भी करने के लिए नहीं था - यह वास्तव में अमान्य प्लगइन संशोधन हो गया।

हालांकि कुछ अन्य लोगों ने इस समस्या का अनुभव किया: किसी भी अतिरिक्त एचटीएमएल, सीएसएस और विशेष रूप से जावास्क्रिप्ट देखें क्योंकि यह समस्या का कारण बनने की संभावना है।

Answer 2

मैं तुम्हें मोबाइल उपकरणों के लिए scrollOverflow उपयोग करने के लिए सिफारिश नहीं होगा।

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

आप उन वर्गों पर कक्षा fp-auto-height का उपयोग कर सकते हैं जिसमें आपकी सामग्री मोबाइल उपकरणों पर बहती जा रही है। आपको केवल तभी जोड़ना चाहिए जब आपकी साइट उत्तरदायी हो, यह निश्चित चौड़ाई या ऊंचाई सीमा के नीचे है।

इस तरह वे अनुभाग डिवाइस व्यूपोर्ट से बड़े होने में सक्षम होंगे।

responsiveHeight या responsiveWidtdh के साथ fullpage.js के विकल्प (जो autoScrolling:false सेट करें) आप छोटे स्क्रीन उपकरणों पर एक सुंदर उत्तरदायी साइट प्राप्त कर पाएंगे।

उदाहरण के तौर पर आप एक छोटे व्यूपोर्ट का उपयोग करके this site using fullpage.js पर एक नज़र डाल सकते हैं। यह fp-auto-height विकल्प का उपयोग नहीं कर रहा है लेकिन परिणाम बिल्कुल वही है।

/*screen resolutions smaller than 950px height*/ 
@media (max-width: 950px){ 
    #section3.fp-section, 
    #section3 .fp-tableCell{ 
     height: auto !important; 
     min-height: 100%; 
    } 
} 

कौन सा सुंदर क्या fullpage.js के समान है fp-auto-heigh के लिए उपयोग करता है::

.fp-auto-height.fp-section, 
.fp-auto-height .fp-slide, 
.fp-auto-height .fp-tableCell{ 
    height: auto !important; 
} 

अद्यतन

fullpage.js अब प्रदान करता है

इस का उपयोग करते हुए उस मामले में

साइट हमें इसी उद्देश्य के लिए कक्षा fp-auto-height-responsive। अधिक in the docs।