के आधार पर सामग्री के पन्नों मैं तो जैसे सरल डेटा ग्रिड है:लोड और हटाने स्क्रॉल दिशा और ऊंचाई
<div class="uiGridContent">
<table>
<tbody id="page-1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
</div>
* ध्यान दें कि मैं ऊपर और नीचे uiGridContent divs में एक शीर्ष लेख और अलग तालिकाओं में पाद लेख है div। इस उदाहरण के लिए इसकी आवश्यकता नहीं है।
var nextPage = 1, lastScrollTop = 0, st;
$('.uiGridContent').scroll(function(){
var st = $(this).scrollTop();
// We're scrolling down
if (st > lastScrollTop){
if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent')[0].scrollHeight && nextPage < 10) {
$.ajax({
url: '<?php echo $appurl; ?>?page=' + nextPage,
success: function(data) {
nextPage = nextPage + 1;
var content = $(data).find('.uiGrid tbody').html();
$('.uiGridContent tbody').last().after('<tbody id="page-'+nextPage+'">'+content+'</tbody>');
},
error: function(data) {
alert(data);
}
});
}
lastScrollTop = st;
// We're scrolling up
} else {
if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) {
var pageToRemove = $('.uiGridContent tbody').last();
if(pageToRemove.attr('id') != 'page-1') {
pageToRemove.remove(); nextPage = nextPage - 1;
} else {
$('.uiGridContent').scrollTo(0,0);
}
}
lastScrollTop = st;
}
});
विचार किया जा रहा है कि उपयोगकर्ता स्क्रॉल तालिका नीचे के रूप में, यह अगले पृष्ठ में लोड होगा जब वे gridcontent div में पिछले tbody के नीचे पहुंच जाते हैं। जो ठीक काम करता है!
समस्या स्क्रॉलिंग बैक अप के साथ निहित है। जहां योजना इसे बनाना है ताकि उपयोगकर्ता आखिरी टैब्स के पीछे बैक अप हो जाए, जब तक कि वे केवल एक शेष शेष (इस मामले में मूल) के साथ समाप्त न हो जाएं। वास्तव में क्या होता है जैसे ही वे स्क्रॉल करना शुरू करते हैं, यह पहले को छोड़कर उन सभी को हटा देता है, या कभी-कभी स्क्रॉल अप को याद करता है और उपयोगकर्ता को अन्य सभी tbodys को हटाए बिना शीर्ष पर ले जाता है।
कोई विचार? मुझे लगता है कि समस्या अगर कथन के साथ है:
if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) {
स्क्रॉल अप अनुभाग के तहत।
if ($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height())
यह क्या है या नहीं .uiGridContent की scrollTop प्लस यह .innerHeight() की ऊंचाई से अधिक है है पूछ रहा है: