5
に基づいてコンテンツのページを削除します。ロードなどのように、私は単純なデータグリッドを持って、スクロール方向と高さ
<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上記および下記のdivに別々のテーブルのヘッダーとフッターを持っていることに注意してください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の底に達したときにユーザーがスクロール表ダウンとして、それは次のページにロードされますということでアイデア。 これはうまくいく！
問題は、スクロールバックアップにあります。ユーザーが最後のtbodyを超えてスクロールバックすると、残りのtbody（この場合は元のもの）が1つだけ残るまで、再びtbodyを削除します。実際に何が起こるかは、スクロールアップを開始して最初のものを除くすべてを削除するか、スクロールアップを逃して、他のすべてのtbodysを削除せずにトップにユーザを移動させることです。
アイデア？私は問題がif文にあると思う：
if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) {
スクロールアップセクションの下。