javascript - 为什么我在向下滚动时不重新加载数据,而在无限滚动中返回到页面顶部时重新加载数据?

标签 javascript jquery ajax

我正在做的是使用 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');
    }   
?>

最佳答案

这是正常现象 $(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 可以轻松看到这一点

关于javascript - 为什么我在向下滚动时不重新加载数据,而在无限滚动中返回到页面顶部时重新加载数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50188350/

相关文章:

javascript - Bootstrap 5 Offcanvas - 检测 offcanvas 项目是否在加载时显示

jquery - 使用 jQuery 设计昂贵的自定义事件?

javascript - ajax xml 加载后 jQuery 切换不起作用

ajax - XMLHttpRequest 状态码 -1 是什么意思?

javascript - 如何使用 javascript、使用路由器和辅助 socket 重定向 Angular2 应用程序

javascript - 如果输入字段为空则显示错误消息,否则没有消息 Vue.js

asp.net - 需要 IDE 建议。Envionment : ASP. NET-VB-JAVASCRIPT

javascript - 为什么元素类的改变会扭曲 View ?

javascript - 如何让仅使用 jQuery 的 DIV 垂直调整大小 - 没有插件?

javascript - AJAX 成功 (ASP.NET MVC) 上的关闭模式