Question

我有一个页面，我从我的sql数据库表中获取数据并加载它。需要在滚动上加载数据。因为我从数据库表中获取数据，所以很难确定哪个行已经加载并加载除此之外的数据。那么有没有基于窗口高度的方法我可以向下滚动以显示更多数据 - 除了设置溢出以滚动主体或主容器？任何帮助表示赞赏。感谢。

Answer 1

您可以跟踪一个状态变量，告诉您的php脚本返回什么偏移量。

var offset = 0;
var loading = false;

$(window).on('scroll', function(){

    if($('#element').offset().top >= ($(window).scrollTop() - $(window).height()))
    {
        loading = true;
        $.ajax({
            //all your ajax settings here
            data: {offset: offset}
            success: function(data){
                // add data to dom here
                loading = false;
                offset += 1;
            }
        });
    }

});

这样你就可以将偏移传递给你的脚本并返回相对于这个数字的数据，但是你选择解释它。

在mysql中使用的偏移量。我将给出一个php示例，因为您没有指定语言：

$limit = "0, 20";
if(isset($_POST['offset']))
{
    // obviously you should sanitize this, but for example we
    // ignore that for now.

    $limit = ($_POST['offset'] * 20) .", 20";
}

$sql = "SELECT * FROM `table` ORDER BY `date` DESC LIMIT $limit";
// run your query and echo the results

你看，传递的偏移只是改变了查询以获取下一个数据块。在javascript中，我们在成功时递增此数字，因此下次窗口到达底部时，它会将下一个偏移量传递给php并返回下一个增量。我们使用任意数字20，假设您正在返回某些具有行的数据，如博客条目，图像等。

在滚动jquery上显示加载的内容

1 个答案: