Pregunta Cómo implementar un desplazamiento infinito / infinito dentro de un DIV en Javascript / jQuery [duplicado]


Esta pregunta ya tiene una respuesta aquí:

Me doy cuenta de que hay varias preguntas aquí que abordan el problema del desplazamiento sin fin. Sin embargo, la mayoría de ellos usan complementos.

Me gustaría saber cómo implementar el desplazamiento infinito que funcionaría con mi funcionalidad de búsqueda existente. Actualmente tengo un botón de "cargar más", cuando se hace clic en, buscaré los siguientes 10 elementos y anexaré a la lista. En lugar de hacer esto cuando se hace clic en el botón "cargar más", me gustaría que sucediera cuando la posición de desplazamiento llega al final. Además, esta lista no está en la página principal, está dentro de un DIV. Almacenar el número de página en un campo oculto con id 'pageNum'.

$.ajax({
        type: "GET",
        url: "/GetItems",
        data: { 'pageNum': $('#pageNum').val() },
        dataType: "json",
        success: function (response) {
                $('#MyDiv ul').append(response.Html);
                $('#pageNum').val(response.PageNum);
            }
        }
});

#MyDiv
{
    border:solid 1px #ccc; 
    width:250px;
    height:500px;
    overflow-y: scroll;
}

<div id="MyDiv">
  <ul>
    <li>...</li>
    ...
  </ul>
</div>

16
2018-03-03 01:00


origen


Respuestas:


los forma más simple, es comprobar si ha llegado al final y activar un clic-evento en su botón "cargar más".

$(window).on('scroll', function(){
    if( $(window).scrollTop() > $(document).height() - $(window).height() ) {
        $("#load-more").click();
    }
}).scroll();

El script anterior es solo un ejemplo, no lo use en su entorno de producción.

actualizar

... y la mejor manera es llamar a la función en lugar de activar un evento que llame a la función.

actualización2

... y la mejor manera: deje que el usuario decida qué hacer si lo hace (en este caso, se desplaza hacia abajo para llegar al final de su página, no para llegar a la siguiente página);)


34
2018-03-03 04:37