Question

以下是代码示例，我完全正常工作的情况是当滚动条击中底部时它会加载进一步的ajax请求，我想在它达到90％并超出该表单顶部时加载它。

$count = sql::read("SELECT COUNT(table_column_name) as count FROM table_name WHERE Info ='".$info."'");
$actual_row_count = $count[0]->count;

<script type="text/javascript">
         $(document).ready(function(e) {
            var page = 1;
            var flag = 0;
            $(window).scroll(function () {
                $('#more').hide();
                $('#no-more').hide();
                if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    $('#more').css("top","400");
                    if(flag == 0)
                    {
                        $('#more').show();
                    }
                }
                if($(window).scrollTop() + $(window).height() == $(document).height()) {
                    $('#more').hide();
                    $('#no-more').hide();
                    page++;
                    var data = {
                        page_num: page,
                        info : '<?php echo $info; ?>'
                      };
                    var actual_count = "<?php echo $actual_row_count; ?>";
                     if((page-1)* 12 > actual_count){
                        $('#no-more').css("top","400");
                        $('#no-more').show();
                        flag = 1 ;
                    }
                    else{
                        $.ajax({
                            type: "POST",
                            url: "data.php",
                            data:data,
                            success: function(res) {
                                $("#result").append(res);
                                console.log(res);
                            }
                        });
                    }
                }
            });
        });
</script>

Answer 1

您需要的是计算当前视口的底部是否超过文档总高度的9/10。考虑以下表达式，它可能会有所帮助：

($(window).scrollTop() + $(window).height()) / $(document).height() > 0.9

但是，由滚动事件每秒触发多次的事实引起的主要问题。因此，在解决单个ajax请求之前，它会进行所有可能的调用。您需要在第一次调用之前取消附加事件处理程序，并在ajax成功后重新附加它。

例如：

var win = $(window);
function onScroll() {
    ...
    if (90% document scrolled) {
        win.off('scroll', onScroll);
        $.ajax({
            ...
            success: function(res) {
                $("#result").append(res);
                win.on('scroll', onScroll);
            }
        });
    }
}
win.on('scroll', onScroll);

如何使滚动上的ajax加载到大约90％而不是滚动条到达底部？

1 个答案: