我有这样简单的数据网格:
<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(在这种情况下是原始的)。实际发生的是,一旦他们开始向上滚动,它就会删除除第一个之外的所有其他 tbody,或者有时会错过向上滚动并将用户带到顶部而不删除所有其他 tbody。
有什么想法吗?我认为问题在于 if 语句:
if( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() ) {
在向上滚动部分下。
最佳答案
是的,你是对的,问题在于 if
中使用的条件声明:
if ( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height() )
这是在询问 .uiGridContent
的 scrollTop 是否再加上它是 .innerHeight()
大于最后tbody
的高度元素。这类似于询问可滚动 Pane 的底部是否低于最后一个 tbody
的高度。如果元素位于 .uiGridContent
的顶部.这不是你想要的。
你想要的是询问可滚动 Pane 的底部是否高于最后一个 tbody
的顶部元素。由于你只关心最后一个,你可以使用:
if ( $('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() <= ($this[0].scrollHeight - $('.uiGridContent tbody').last().height()) )
尽管您真的想缓存那些对$( ... )
的重复调用正如我在这个演示中所做的那样:
你可能想要缓存 scrollBottom
的想法(内容底部和可视区域底部之间的距离)不管你在使用它,它可能有助于提高可读性:
关于javascript - 根据滚动方向和高度加载和删除内容页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19384297/