javascript - example - load scroll jquery

plugin jquery infinite-scroll

Question

Estoy intentando configurar infinite-scroll en un sitio que estoy desarrollando con Coldfusion, soy nuevo en javascript y jquery, así que estoy teniendo algunos problemas para resolver todo esto. ¿Debo tener paginación en mi sitio para usar el plugin infinite-scroll, o hay una manera de hacerlo sin él?

Answer 1

Construí sobre el pequeño ejemplo de Hussein aquí para hacer un widget jQuery. Admite localStorage para guardar temporalmente los resultados adjuntos y tiene una función de pausa para detener el anexar cada cierto tiempo, lo que requiere un clic para continuar.

Darle una oportunidad:

http://www.hawkee.com/snippet/9445/

Answer 2

Escribí esta función usando las ideas de Hussein y Nick, pero quería que utilizara promises para la devolución de llamada. También quería que el área infinita de desplazamiento estuviera en un div fijo y no solo en la ventana si el div se enviaba al objeto de opciones. Hay un ejemplo de eso en mi segundo enlace a continuación. Sugiero usar una biblioteca de promesas como Q si quieres admitir navegadores más antiguos. El método cb puede o no ser una promesa y funcionará independientemente.

Se usa así:

html

<div id="feed"></div>

js

var infScroll = infiniteScroll({
    cb: function () {
        return doSomethingPossiblyAnAJAXPromise();     
    }
});

Si desea que el feed se detenga temporalmente, puede devolver false en el método cb. Útil si ha llegado al final del feed. Se puede volver a iniciar llamando al método de objeto devuelto de infiniteScroll ''setShouldLoad'' y pasando en verdadero y ejemplo para ir junto con el código anterior.

infScroll.setShouldLoad(true);

La función para desplazamiento infinito es esto

function infiniteScroll (options) {
    // these options can be overwritten by the sent in options
    var defaultOptions = {
        binder: $(window), // parent scrollable element
        loadSpot: 300, //
        feedContainer: $("#feed"), // container
        cb: function () { },
    }

    options = $.extend(defaultOptions, options);
    options.shouldLoad = true;

    var returnedOptions = {
        setShouldLoad: function (bool) { options.shouldLoad = bool; if(bool) { scrollHandler(); } },
    };

    function scrollHandler () { 
        var scrollTop = options.binder.scrollTop();
        var height = options.binder[0].innerHeight || options.binder.height();
        if (options.shouldLoad && scrollTop >= (options.binder[0].scrollHeight || $(document).height()) - height - options.loadSpot) {
            options.shouldLoad = false;
            if(typeof options.cb === "function") {
                new Promise(function (resolve) {resolve();}).then(function() { return options.cb(); }).then(function (isNotFinished) {
                    if(typeof isNotFinished === "boolean") {
                        options.shouldLoad = isNotFinished;
                    }
                });
            }
        }
    }

    options.binder.scroll(scrollHandler);

    scrollHandler();

    return returnedOptions;

}

1 ejemplo de alimentación con ventana como desplazador

Ejemplo de 2 alimentaciones con alimentación como desplazador

Answer 3

Estoy usando la respuesta de Hussein con las solicitudes de AJAX. Modifiqué el código para que se disparara a 300px en vez de 10px, pero comenzó a causar que mis adjuntos se multiplicaran antes de que la solicitud AJAX finalizara, ya que la llamada de desplazamiento se dispara mucho más frecuentemente en un rango de 300px que en un rango de 10px.

Para solucionar esto, agregué un disparador que sería volteado en la carga exitosa de AJAX. Mi código se parece más a esto:

var scrollLoad = true;

$(window).scroll(function () { 
  if (scrollLoad && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
    scrollLoad = false;
    //Add something at the end of the page
  }
});

luego, en mi respuesta AJAX, configuré scrollLoad en true .

Answer 4

No necesita el complemento de desplazamiento infinito para esto. Para detectar cuando el desplazamiento llega al final de la página, con jQuery puede hacer

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      //Add something at the end of the page
   }
});

Demo en JsFiddle

Answer 5

Si tiene alguna referencia, como su pie de página, puede usar este código, digamos que tiene un divisor de pie de página con el ID #footer:

function element_in_scroll(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(document).scroll(function(e){
    if (element_in_scroll("#footer")) {
        //Here you must do what you need to achieve the infinite scroll effect...
    };
});

Además, si desea obtener más información, consulte cómo crear scroll infinito en jquery manual http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Answer 6

Si tiene un elemento desplazable, como un div con desbordamiento de desplazamiento, pero no hay documento / página desplazable, puede hacerlo de esta manera.

       $(function () {
            var s = $(".your-scrollable-element");
            var list = $("#your-table-list");

            /* On element scroll */
            s.scroll(function () {
                /* The scroll top plus element height equals to table height */
                if ((s.scrollTop() + s.height()) == list.height()) {
                    /* you code */
                }
            });
        });

Answer 7

Tuve el mismo problema pero no encontré el complemento adecuado para mi necesidad. así que escribí el siguiente código. este código agrega la plantilla al elemento obteniendo datos con ajax y paginación. para detectar cuando el usuario se desplaza al final de div usé esta condición:

var t = $("#infiniteContent").offset().top;
var h = $("#infiniteContent").height();
var ws = $(window).scrollTop();
var dh = $(document).height();
var wh = $(window).height();

if (dh - (wh + ws) < dh - (h + t)) {
    //now you are at bottom of #infiniteContent element
}

$(document).ready(function(){
 $.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: 1, _limit:3 }, function (jsonre) {
        appendTemplate(jsonre,1);
    });
});

function appendTemplate(jsonre, pageNumber){
 //instead of this code you can use a templating plugin like "Mustache"
 for(var i =0; i<jsonre.length; i++){
   $("#infiniteContent").append("<div class=''item''><h2>"+jsonre[i].name+"</h2><p>"+jsonre[i].body+"</p></div>");
  }

  if (jsonre.length) {
    $("#infiniteContent").attr("data-page", parseInt(pageNumber)+1);
    $(window).on("scroll", initScroll);
    
    //scroll event will not trigger if window size is greater than or equal to document size
    var dh = $(document).height() , wh = $(window).height();
    if(wh>=dh){
     initScroll();
    }
  }
  else {
    $("#infiniteContent").attr("data-page", "");
  }
}

function initScroll() {
    var t = $("#infiniteContent").offset().top;
    var h = $("#infiniteContent").height();
    var ws = $(window).scrollTop();
    var dh = $(document).height();
    var wh = $(window).height();

    if (dh - (wh + ws) < dh - (h + t)) {
        $(window).off(''scroll'');
        var p = $("#infiniteContent").attr("data-page");
        if (p) {
            $.getJSON("https://jsonplaceholder.typicode.com/comments", { _page: p, _limit:3 }, function (jsonre) {
                appendTemplate(jsonre, p);
            });
        }
    }
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="infiniteContent"></div>

Answer 8

$(function(){ 
    $(window).scroll(function(){
           if($(document).height()<=$(window).scrollTop()+$(window).height()+100){
               alert(''end of page'');
           }
       });
});

Alguien pidió una explicación así que aquí está la explicación

aquí $ (documento) .height () -> es la altura de todo el documento. En la mayoría de los casos, esto es igual al elemento del documento actual.

$ (ventana) .height () -> es el alto de la ventana (navegador) significa altura de lo que sea que esté viendo en el navegador.

$ (window) .scrollTop () -> La propiedad Element.scrollTop obtiene o establece el número de píxeles que el contenido de un elemento se desplaza hacia arriba. El scrollTop de un elemento es una medida de la distancia de la parte superior de un elemento a su contenido visible superior. Cuando el contenido de un elemento no genera una barra de desplazamiento vertical, su valor de scrollTop se establece por defecto en 0.

$(document).height()<=$(window).scrollTop()+$(window).height()+100

agregue $ (ventana) .scrollTop () con $ (ventana) .height () ahora compruebe si el resultado es igual a su altura de documnet o no. si es igual significa que ha llegado al final. También estamos agregando 100 porque quiero verificar antes de los 100 píxeles desde la parte inferior del documento (nota <= en condición)

Por favor, corríjame si estoy equivocado