jQuery मोबाइल सफारी/iOS पर पता लगाने पृष्ठ के नीचे

Question

मैं मूल रूप से फेसबुक, ट्विटर जैसी ही और उन सभी अन्य "अनंत" पुस्तक साइटों काम करना चाहते हैं, कोड इस समय का उपयोग कर im

jQuery(document).ready(function(){ 
    $ = jQuery; 
     $(window).scroll(function(){ 
      if ($('.iosSlider').is(':visible')) 
      { 
       if($(window).scrollTop() + $(window).height() == $(document).height()) 
       { 
       $.get('/our-work/fakework.php', function(data) { 
       $('#mobile-thumbs').append(data); 
       }); 
       } 
      } 
     }); 
}); 

यह वह जगह है सभी डेस्कटॉप ब्रॉवर्स पर बेकार ढंग से काम करता है, और यहां तक ​​कि मेरे ब्लैकबेरी पर भी कभी-कभी स्क्रॉल डाउन बटन को स्पैम करने के बाद यह काम करता है।

हालांकि यह एक बार आईफोन या आईपैड पर नहीं पाया गया, मुझे लगता है कि यह उस पर व्यूपोर्ट के साथ कुछ था लेकिन कौन जानता है।

मैं

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 

के व्यूपोर्ट ऊंचाई विधि का उपयोग करने की कोशिश की लेकिन यह फ्लॉप या तो इसे ठीक करने के लिए लग रहे हैं!

तो कृपया किसी व्यक्ति को iDevices पर पृष्ठ के नीचे का पता लगाने के तरीके के बारे में कुछ प्रकाश साझा कर सकते हैं!

धन्यवाद !!

ओवेन

Answer 1

उम्र के लिए डिबगिंग के बाद मैं पता चला कि

if($(window).scrollTop() + $(window).height() == $(document).height()) 

वास्तव में मुलाकात हो रही है कभी नहीं किया गया था, अच्छी तरह से यह फिर भी मुलाकात हो रही थी यह does not कि मोबाइल सफारी किसी भी जावास्क्रिप्ट whilst व्यूपोर्ट चलती है चलाने लगता है ।

इसका मतलब यह है कि जब तक आप दस्तावेज़ की ऊंचाई पर बिल्कुल स्क्रॉल को रोक नहीं देते हैं (कोई उछाल वाली चीज़ नहीं) तो यह समान ऊंचाई के बराबर समान रूप से समान होगा।

तो मैंने बस उसी ऊंचाई को बराबर करने के बजाय कोड को बदल दिया, यह जांचने के लिए कि यह बराबर या अधिक था, इस तरह यह तब भी ट्रिगर होगा जब यह पिछले स्क्रॉल हो गया हो! इसलिए संशोधित कोड अब लग रहा है

तो ठीक नीचे

if($(window).scrollTop() + $(window).height() >= $(document).height()){ 

यहाँ है

तरह

jQuery(document).ready(function(){ 
    $ = jQuery; 
     $(window).scroll(function(){ 
      if ($('.iosSlider').is(':visible')) 
      { 
       if($(window).scrollTop() + $(window).height() >= $(document).height()) 
       { 
       $.get('/our-work/fakework.php', function(data) { 
       $('#mobile-thumbs').append(data); 
       }); 
       } 
      } 
     }); 
}); 

और उसके अब एक आकर्षण की तरह काम!

Answer 2

मुझे एक ही समस्या थी। कोड स्निपेट डेस्कटॉप पर ठीक काम करता है लेकिन आईओएस मोबाइल डिवाइस पर नहीं। body के साथ document को बदलने के बाद समस्या ठीक हो गई थी। इसके अलावा, यह जाँच करने के लिए करता है, तो आप स्क्रीन के नीचे के पास होते हैं बेहतर है:

if($(window).scrollTop() + $(window).height() > $('body').height() - 200) 

Answer 3

पूरी तरह से काम कर रहा Multibrowser और multidevice संगत समाधान:

function getDocumentHeight() { 
return Math.max(
    Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), 
    Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), 
    Math.max(document.body.clientHeight, document.documentElement.clientHeight) 
); 
} 

और फिर .. ..

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

:

$(window).scroll(function() { 
    var docHeight = getDocumentHeight(); 
    if($(window).scrollTop() + window.innerHeight == docHeight) 
       { 
         // enter your code here 
       } 
     }); 

भी व्यूपोर्ट मेटा के बारे में मत भूलना