स्क्रॉल ईवेंट कैप्चर कैसे करें?

Question

मैं अनंत स्क्रॉलिंग लागू करना चाहता हूं। नीचे मेरे लेआउट का एक छोटा रूप है। चूंकि मेरे पास कुछ तत्व रिश्तेदार हैं, इसलिए जावास्क्रिप्ट स्क्रॉल इवेंट आग नहीं है।

स्क्रॉल ईवेंट को निकालने और अनंत स्क्रॉलिंग को लागू करने के लिए मैं इस समस्या को कैसे ठीक कर सकता हूं?

मेरा मुख्य लेआउट है:

<div id="container"> 
    <div class="wrapper"> 
     <div id="header"> 
     ... 
     </div> <%-- header --%> 

     <div id="main"> 
     ... 
     </div> 

    </div> <%-- wrapper --%> 
</div> <%-- container --%> 
<div id="footer"> 
</div> 

और मेरे सीएसएस है:

#container { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 35px; 
    left: 0; 
    right: 0; 
    overflow-y: auto;  
    overflow-x: hidden;  
} 

.wrapper { 
    margin: 0 auto; 
    width: 960px; 
    position: relative; 
} 

#header { 
    position: relative; 
} 

#main { 
} 

#footer { 
    z-index: 2; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 35px; 
} 

क्या मैं इस तरह के परिवर्तन करने के लिए है कि मैं अनंत स्क्रॉल को लागू करने के लिए अपने लेआउट के साथ ब्राउज़र स्क्रॉल घटना प्राप्त कर सकते हैं की क्या ज़रूरत है ?

Answer 1

इसे लागू करने का सही तरीका यह है:

<div id="container" onscroll="Onscrollfnction();"> 

<script> 
function Onscrollfnction() { 
     alert("scroll"); 
    }; 
</script> 

Answer 2

यह मैं अपने कोड में क्या प्रयोग किया जाता है ...

<div id="DataDiv" style="overflow: auto; width: 280px; height:400px; margin-top: 10px;" 
        onscroll="Onscrollfnction();"> 
     my content here 
</div> 

समारोह

function Onscrollfnction() { 
      var div = document.getElementById('DataDiv'); 
      div.scrollLeft; 
      return false; 
     }; 

सामग्री पार 400px के बाद नीचे के रूप में है, स्क्रॉल शुरू कर देंगे और अनंत हो जाएगा ..

का आनंद

Answer 3

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

<div id="container"> 
    CONTENT 
</div> 

jQuery:

आप jquery के साथ अपने सवाल ...

---

jQuery का उपयोग कर अपने स्क्रॉल ईवेंट को सक्रिय करने के लिए ...

एचटीएमएल टैग किए गए के बाद से

$(document).ready(function() { 

    $('#container').scroll(function() { 
     alert('scroll'); 
     // presumably your infinite scrolling code here 
    }); 

}); 

देखें: http://api.jquery.com/scroll/