सामग्री डिज़ाइन लाइट, नीचे स्क्रॉल

Question

पर पहुंचने पर जांचें, मैं Angular.js के साथ सामग्री डिज़ाइन लाइट का उपयोग कर रहा हूं। घटना को पाने के लिए समस्या होने पर ईवेंट को नीचे पहुंचने पर कॉल किया जाता है। मैंने लगभग हर समाधान की कोशिश की है लेकिन काम नहीं कर रहा है। jQuery समाधान जैसा:

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() ==  
     $(document).height())   
    { 
     alert("bottom!"); 
    } 
}); 

या जावास्क्रिप्ट एक:

document.addEventListener('scroll', function (event) { 
    if (document.body.scrollHeight == 
     document.body.scrollTop + window.innerHeight) { 
     alert("Bottom!"); 
    } 
}); 

Nothings काम कर रहे। इस प्रश्न के अनुसार: Material design and jQuery, scroll not working

स्क्रॉल ईवेंट .mdl-layout__content क्लास पर आग लगेगा, लेकिन फिर भी नीचे पहुंचने के लिए ईवेंट प्राप्त करने में असमर्थ है या नहीं।

और शायद मैं "mdl-layout__content" वर्ग पर भी बाध्य नहीं करना चाहता, क्योंकि यह प्रत्येक पृष्ठ पर शामिल किया जाएगा। मैं इसे सिर्फ एक विशेष पृष्ठ के लिए चाहता हूं।

संपादित: इस कोड को ठीक काम कर रहा है, लेकिन समस्या है:

function getDocHeight() { 
    var D = document; 
    return Math.max(
      document.getElementById("porduct-page-wrapper").scrollHeight, 
      document.getElementById("porduct-page-wrapper").offsetHeight, 
      document.getElementById("porduct-page-wrapper").clientHeight 
     ); 
} 
window.addEventListener('scroll', function(){ 
    if($('.mdl-layout__content').scrollTop() + $('.mdl-layout__content').height() == getDocHeight()) { 
      alert("bottom!"); 
    } 
}, true); 

समस्या है, हर बार जब मैं पेज बदलने के लिए, और वापस, बार घटना कहा जाता चाहिए गुणा किया जाता है की संख्या आता है। जब भी मैं पेज बदलता हूं या लिंक लिंक करता हूं, तो शायद यह बार-बार बाध्यकारी घटना है। मैं Angular.js का उपयोग कर रहा हूं, मैं इसे कैसे रोक सकता हूं?

Answer 1

ठीक है, मुझे लगता है कि आप वर्तमान स्क्रॉल इवेंट कॉलबैक में शरीर की स्थिति का बिल्कुल पता लगाने के साथ अपनी समस्या को ठीक कर सकते हैं। एक html element की getBoundingClientRect विधि का उपयोग करें:

document.addEventListener('scroll', function (event) { 
    var bodyRect = document.getElementsByTagName('body')[0].getBoundingClientRect(); 
    if (bodyRect.bottom - window.innerHeight <= 20){ 
    // less then 20px rest to get the bottom 
    alert("Bottom!"); 
    } 
});