मोबाइल डिवाइस के लिए स्कॉलर अक्षम करें (<767px)

Question

सबसे पहले इस तरह की एक अद्भुत और शक्तिशाली लाइब्रेरी के लिए @prinzhorn धन्यवाद देना चाहूंगा। मेरा प्रश्न: मैंने अपनी वेबसाइट के शीर्षलेख पर एक स्क्रॉलर लंबन पृष्ठभूमि लागू की है, लेकिन मोबाइल डिवाइस, विशेष रूप से आईफ़ोन इत्यादि जैसे देखे जाने पर मैं इस सुविधा को अक्षम करना चाहता हूं। (अधिकतम चौड़ाई: 767 पीएक्स)। मैं सोच रहा था कि ऐसा करने का सबसे अच्छा तरीका क्या होगा? और यदि नष्ट() फ़ंक्शन ऐसा करने में सक्षम था या मुझे एक और तकनीक का उपयोग करना चाहिए? इसके अलावा, अगर नष्ट() जवाब है, तो मैं इसे सही ढंग से कैसे कार्यान्वित कर सकता हूं? बहुत धन्यवाद और उदाहरण या डेमो की बहुत सराहना की।

Answer 1

नष्ट() विधि यह करती है। यदि खिड़की को छोटे होने के आकार में बदल दिया जाता है तो आप छोटी खिड़कियों पर स्क्रॉलर शुरू करने से बच सकते हैं, और/या स्कॉलर को नष्ट कर सकते हैं।

$(function() { 
    // initialize skrollr if the window width is large enough 
    if ($(window).width() > 767) { 
    skrollr.init(yourOptions); 
    } 

    // disable skrollr if the window is resized below 768px wide 
    $(window).on('resize', function() { 
    if ($(window).width() <= 767) { 
     skrollr.init().destroy(); // skrollr.init() returns the singleton created above 
    } 
    }); 
}); 

इस उदाहरण में, यदि खिड़की बड़े आकार में बदल जाती है तो स्कॉलर पुनः सक्षम नहीं होता है।

//function 
$(function skrollrInit() { 

    //initialize skrollr 
    skrollr.init({ 
     smoothScrolling: false 
    }); 

    // disable skrollr if using handheld device 
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
     skrollr.init().destroy(); 
    } 

}); 

//execute function 
skrollrInit(); 

Answer 2

तुम भी userAgent का पता लगाने का उपयोग कर सकते :

@media only screen and (max-width: 480px){ 
    .divWithSkrollr{ 
     transform: none !important; 
    } 
} 

Answer 3

Skrollr अपने स्वयं के मोबाइल की जांच समारोह

var s = skrollr.init(); 
if (s.isMobile()) { 
    s.destroy(); 
} 

Answer 4

है कुछ मामलों तुम सिर्फ संक्रमण को निष्क्रिय में: लंबन प्रभाव तो छोटे डेस्कटॉप प्रस्तावों अभी भी मिलता है -

Answer 5

.destroy() विधि सही मुलाकात है उपयोग करने के लिए hod; हालांकि, मैं स्वीकार किए गए उत्तर से अलग तरीके से संपर्क करूंगा। skrollr उदाहरण शुरु कर रहा है दूसरी बार यह अनावश्यक है को नष्ट करने के लिए और प्रदर्शन में सुधार किया जा सकता है .get() पद्धति का उपयोग करके, तो जैसे:

$(function() { 
    // Init function 
    function skrollrInit() { 
    skrollr.init(yourOptions); 
    } 

    // If window width is large enough, initialize skrollr 
    if ($(window).width() > 767) { 
    skrollrInit(); 
    } 

    // On resize, check window width, if too small 
    // and skrollr instance exists, destroy; 
    // Otherwise, if window is large enough 
    // and skrollr instance does not exist, initialize skrollr. 
    $(window).on('resize', function() { 
    var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined 
    var windowWidth = $(window).width(); 

    if (windowWidth <= 767 && _skrollr !== undefined) { 
     _skrollr.destroy(); 
    } else if (windowWidth > 767 && _skrollr === undefined) { 
     skrollrInit(); 
    } 
    }); 
}); 

Skrollr दूसरी बार प्रारंभ हो जाता है कभी नहीं करता है, तो यह वर्तमान में मौजूद है और केवल नष्ट हो जाता है यदि वह मौजूद है । यह प्रारंभिक और नष्ट करने के बीच संक्षिप्त पल द्वारा आपको प्राप्त होने वाली किसी भी बग से बचाता है (मैं इस पर अनुभव से बात करता हूं)।

Answer 6

मेरे लिए मैं कुछ मोबाइल पर केवल कुछ प्रभाव अक्षम करना चाहता था। मैं उत्तरदायित्व के लिए बूटस्ट्रैप का उपयोग कर रहा था, इसलिए मोबाइल पर कॉलम ध्वस्त होने पर डेस्कटॉप पर कुछ प्रभावों ने हस्तक्षेप किया।

मेरा समाधान उन प्रभावों पर एक कस्टम क्लास बनाना था जो मैं मोबाइल पर काम नहीं करना चाहता था। disable-mobile-skroll और उसके बाद स्क्रॉलर प्रारंभ होने से पहले उपयोग किए जा रहे डेटा विशेषताओं को हटा दें।

if ($(window).width() < 768) { 
    $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top'); 
}; 
// init Skrollr here