為什么向下滾動時不重新加載數據，而在無限滾動中返回頁面頂部時為什么不重新加載數據？

Question

我正在做的是使用jQuery，AJAX和PHP進行無限滾動的方法，但是當您必須加載數據時，我會在頁面頂部而不是在頁面底部時重新加載頁面，離開我的jQuery和AJAX代碼。 先感謝您！

<script type="text/javascript">
            var start = 0;
            var limit = 5;
            var reachedMax = false;

            $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height())
                    getData();
            });

            $(document).ready(function () {
               getData();
            });

            function getData() {
                if (reachedMax)
                    return;

                $.ajax({
                   url: 'publicaciones.php',
                   method: 'POST',
                   dataType: 'text',
                   data: {
                       getData: 1,
                       start: start,
                       limit: limit
                   },
                   success: function(response) {
                        if (response == "reachedMax")
                            reachedMax = true;
                        else {
                            start += limit;
                            $(".results").append(response);
                        }
                    }
                });
            }
        </script>

這是我的PHP，我添加了代碼來解決我的問題。 我認為我的PHP是必要的。

<?php
    session_start();
    include ('../conexion.php');

    if(isset($_SESSION['id']))
    {
        $id = mysqli_real_escape_string($conexion, $_SESSION['id']);

        $infouser = mysqli_query($conexion, "SELECT * FROM users WHERE id = $id");  
        $use = mysqli_fetch_array($infouser);
    }

    if(isset($_POST['getData']))
    {   
        $start = mysqli_real_escape_string($conexion,$_POST['start']);
        $limit = mysqli_real_escape_string($conexion,$_POST['limit']);

        $consulta = mysqli_query($conexion, "SELECT * FROM publicaciones ORDER BY id_pub DESC LIMIT $start, $limit");   

        if(mysqli_num_rows($consulta) > 0)
        {   
            $response = "";

            while($data = mysqli_fetch_array($consulta)) {
                $response .= "
                    <div class='card mt-3 border-0 rounded-0'>
                        <div class='card-body'>
                            <div class='row'>
                                <div class='col-sm-2'>
                                    <div class='img-user rounded-circle'>
                                        <img class='img-fluid-pub' src='../avatars/".$use['avatar']."' alt='User Image'>
                                    </div>
                                </div>
                                <div class='col-sm-10'>
                                    <a class='text-muted h3' href='perfil.php?id=".$use['id']."'>".$use['usuario']."</a><h3>Seguir</h3>
                                    <p>".$data['fecha']."</p>
                                    <p>".$data['titulo']." Me gusta</p>
                                    <p id='descripcion'>".$data['descripcion']."</p>
                                    <p class='leermas' onclick='leerMas(this);'>Leer más...</p>             
                                    <video controls>
                                        <source src='../anadir-publicacion/publicaciones/".$data['video']."' type='video/mp4'>
                                        Your browser does not support HTML5 video.
                                    </video>
                                    <p>Kcal: ".$data['kcal']." CarbHid: ".$data['carbohidratos']." Prot: ".$data['proteinas']." Gras: ".$data['grasas']." Tiempo: ".$data['tiempo']."m Personas: ".$data['personas']." Dinero aprox: ".$data['precio']."€ Categoría: ".$data['categoria']."</p>
                                </div>
                            </div>
                        </div>
                    </div>  
                ";
            }

            exit($response);
        }
        else 
            exit('reachedMax');
    }   
?>

Answer 1

正常情況下， $(window).scrollTop()開頭等於0，而$(document).height()等於$(window).height()所以是0 == 0在頁面頂部

你想要的是

 var nb_px_before_load = 100
    if($(window).innerHeight() - $(window).scrollTop() < nb_px_before_load){
        getData();
    }

您可以使用帶有斷點的chrome的devTools輕松看到這一點