एक HTML तालिका

Question

में "अंतहीन स्क्रॉलिंग" प्रभाव मैं वेब पेज में एक स्क्रॉल डेटा तालिका प्रदर्शित कर रहा हूं। इस तालिका में कई हजार गतिशील पंक्तियां हैं, इसलिए इसे सर्वर से लोड किया जाता है (AJAX के माध्यम से)।

उपयोगकर्ता ऊपर स्क्रॉल और नीचे, कर सकते हैं तो मैं क्या जरूरत है है का पता लगाने जब उपयोगकर्ता स्क्रॉलबार अनुरोध और इस शो के लिए (कि, टेबल में सबसे नीचे अंतिम पंक्ति है) के अंत तक पहुँच जाता है अधिक डेटा

आप Google पाठक में यह प्रभाव पा सकते हैं, जब आप किसी दिए गए फ़ीड में अंतिम पोस्ट तक स्क्रॉल करते हैं, Google अनुरोध करते हैं और पारदर्शी तरीके से नई पोस्ट दिखाते हैं, लेकिन मैं यह नहीं समझ सकता कि वे इसे कैसे प्राप्त करते हैं।

वैसे, अभी मैं उपयोग कर रहा हूँ एक YUI Datatable

Answer 1

आपके उत्तरों के लिए धन्यवाद। यह मेरा अंतिम कामकाजी कोड है (ग्रेग और ajaxian.com से प्रेरित), जो कुछ jQuery कार्यों का उपयोग करता है और YUI DataTable के साथ काम करता है।

$(".yui-dt-bd").scroll(load_more); 

function load_more() {    
    if ($(this).scrollend()) { 
     alert("SCROLL END REACHED !"); 
     // TODO load more data 
    } 
} 

$.fn.scrollend = function() { 
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0; 
} 

मेरे अगले कदम YUI घटकों :)

Answer 2

मैं विशिष्ट तत्व प्रयोग कर रहे हैं से परिचित नहीं हूँ, लेकिन आदेश एक पूर्ण आकार खिड़की पर यह लागू करने के लिए, आप निम्न कर सकते :

$wnd.onscroll = function() { 
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething(); 
}; 

जहां scrollTop अनिवार्य रूप से "कितने पिक्सल स्क्रॉल किए गए हैं"। मुझे लगता है कि आप उस टेबल पर आवेदन कर रहे हैं जिसके साथ आप काम कर रहे हैं, वह काम करेगा।

Answer 3

एक संपत्ति Firebug में डोम गुण के माध्यम से पढ़ते समय मैंने देखा आज scrollY कहा जाता है (Firebug में डोम टैब के अंतर्गत content>scrollY करने के लिए जाना), जो पिक्सल की राशि खिड़की पर स्क्रॉल करने के लिए छोड़ दिया है प्रतीत होता है नहीं है। यह देखने का प्रयास करें कि यह स्क्रॉल करने योग्य तत्वों के लिए भी बनाया गया है या नहीं। फिर आप नए डेटा को लोड करने के लिए युवाल के फ़ंक्शन का उपयोग कर सकते हैं।

Answer 4

मैंने अभी इसके लिए गुगल किया है और यह आलेख पाया है: Implementing Dynamic Scroll with Ajax, JavaScript, and XML। यह एक पूरी तरह से स्पष्टीकरण की तरह दिखता है।

Answer 5

Ick के साथ एक पूर्ण एकीकरण को प्राप्त करने के अपने ही YUI Paginator लागू करने के लिए है। अंतहीन स्क्रॉलिंग का एक बड़ा प्रशंसक नहीं; यह कुछ महत्वपूर्ण धारणाओं को तोड़ता है जो लोग वेब के काम के बारे में करते हैं। कृपया वादा करें कि आप इसे निम्नलिखित शर्तों के तहत ही कार्यान्वित करेंगे:

1) आप इसे पूरी तरह से अच्छे पृष्ठ के लिए प्रतिस्थापित नहीं कर रहे हैं जो एक अच्छी लंबी तालिका में सब कुछ लोड करता है और उपयोगकर्ता को पृष्ठ के अंदर खोजने के लिए Ctrl-F का उपयोग करने देता है फ्रिंज किस समय आती है।

2) आप स्क्रॉल किए गए डेटा के प्रत्येक खंड के नीचे विज्ञापन डालने की योजना नहीं बनाते हैं।

3) आप अंधेरे लोगों और जावास्क्रिप्ट अक्षम के साथ वेब ब्राउज़ करने वाले लोगों के लिए काम कर रहे फ़ॉलबैक प्रदान कर रहे हैं (हे, फिर भी यह अच्छी लंबी टेबल है)।

Answer 6

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

YUI डॉक्टर इस मामले के लिए एक विशिष्ट उदाहरण नहीं है, लेकिन आप how to handle the data generateRequest

द्वारा दिया

Answer 7

आप इसे केवल here YUI काम कर देख सकते हैं प्रदर्शित करता है। ऊपर सुझाए गए समाधानों में से एक के विपरीत, स्क्रॉलबार लगातार चलता है, स्थिति और आकार दृश्यमान क्षेत्र के वास्तविक आकार और स्थिति को प्रतिबिंबित करता है, जब स्क्रॉलबार नीचे पहुंचता है तो यह अगले बैच लोड नहीं करता है। स्क्रॉलबार तभी पहुंचता है जब पूरे रिकॉर्ड का अंतिम भाग देखने वाले क्षेत्र के नीचे होता है। बेशक, यह केवल तभी काम करता है यदि आप जानते हैं कि कितने रिकॉर्ड हैं।