लोड ajax जब स्क्रॉल तक पहुँचता है 80%

Question

मैं निम्नलिखित कोड है जो जब स्क्रॉल पट्टी botttom तक पहुँच जाता है काम कर रहा है उपयोग कर रहा हूँ,

if($(window).scrollTop() == $(document).height() - $(window).height()){ 

मैं हालांकि चाहते हैं कि ajax निकाल दिया जाता है जब मैं पुस्तक के 70% पर पहुंच गया 100.

Answer 1

परंतु अपने वर्तमान जांच फायरिंग कर रहा है जब पेज के नीचे करने के लिए स्क्रॉल, आप कुछ बुनियादी arithmetics कोशिश कर सकते हैं:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ 
              //where 0.7 corresponds to 70% --^ 

एक चेक एकाधिक अजाक्स अनुरोध आग नहीं है में जोड़ने के लिए सुनिश्चित करें, अगर आप पहले से नहीं थे।

इस बल्कि प्रश्न के दायरे से बाहर है, लेकिन अगर आप कैसे से अधिक अनुरोध को रोकने के लिए का एक उदाहरण चाहते हैं एक साथ निकाले जाने:

एक वैश्विक वर घोषित करता है, उदा processing।

फिर अपने समारोह में शामिल:

if (processing) 
    return false; 

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){ 
    processing = true; //sets a processing AJAX request flag 
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc. 
     //load the content to your div 
     processing = false; //resets the ajax flag once the callback concludes 
    }); 
} 

एक वर का उपयोग कर ट्रैक रखने के लिए यदि आपके स्क्रॉल फंक्शन है या नहीं के लिए एक सक्रिय Ajax अनुरोध है का एक सरल उदाहरण है यही कारण है, और इसके साथ हस्तक्षेप नहीं करता है आपके पास कोई अन्य समेकित अजाक्स अनुरोध है जो आपके पास हो सकता है।

संपादित करें: JSFiddle example

कृपया ध्यान दें कि दस्तावेज़ ऊंचाई मापने एक बुरा विचार हो सकता है, यह देखते हुए कि दस्तावेज़ की ऊंचाई हर बार जब आप कुछ लोड में वृद्धि होगी, यह अपेक्षाकृत अधिक किया जा रहा है Ajax अनुरोध को गति प्रदान करने के लिए एक% का उपयोग पृष्ठ के नीचे से (पूर्ण आकार के अनुसार)।

मैं एक निश्चित मूल्य है कि को रोकने के लिए ऑफसेट (200-700 या तो) का उपयोग की सलाह देते हैं:

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){ 
           // pixels offset from screen bottom --^ 

उदाहरण: JSFiddle

संपादित करें: पहले कोड में इस मुद्दे को दोबारा करने के लिए प्रतिशत के साथ, 50 div एस लोड करें। जब आप अगले div लोड करते हैं, तो यह कुल दस्तावेज़ की ऊंचाई पर केवल 2% जोड़ देगा, जिसका अर्थ है कि जैसे ही आप इन 2% को दस्तावेज़ की ऊंचाई के 70% तक स्क्रॉल करते हैं, अगला अनुरोध ट्रिगर हो जाएगा। मेरे निश्चित उदाहरण में, परिभाषित नीचे ऑफसेट केवल तभी नई सामग्री लोड करेगा जब उपयोगकर्ता स्क्रीन के निचले भाग से परिभाषित पूर्ण पिक्सेल रेंज पर होगा।

Answer 2

get percentage scrolled down के लिए एक त्वरित Google खोज this page को पहले परिणाम के रूप में लाता है (नीचे दिए गए कोड के साथ, जो आप चाहते हैं उतना ही कम करता है)। मुझे लगता है कि आपने यहां पूछने से पहले किसी भी शोध का प्रयास नहीं किया था।

$(document).scroll(function(e){ 

    // grab the scroll amount and the window height 
    var scrollAmount = $(window).scrollTop(); 
    var documentHeight = $(document).height(); 

    // calculate the percentage the user has scrolled down the page 
    var scrollPercent = (scrollAmount/documentHeight) * 100; 

    if(scrollPercent > 50) { 
     // run a function called doSomething 
     doSomething(); 
    } 

    function doSomething() { 

     // do something when a user gets 50% of the way down my page 

    } 

});