& # 8220; Scorrimento infinito & # 8221; effetto in una tabella HTML [chiuso]

Question

Sto visualizzando una tabella di dati scorrevoli in una pagina web. Questa tabella ha diverse migliaia di righe dinamiche, quindi viene caricata dal server (tramite AJAX).

L'utente può scorrere su e giù, quindi ciò di cui ho bisogno è rilevare quando l'utente raggiunge la fine della barra di scorrimento (ovvero l'ultima riga nella parte inferiore della tabella) in ordine per richiedere e mostrare più dati.

Puoi trovare questo effetto in Google Reader, quando scorri verso il basso fino all'ultimo post in un determinato feed, Google richiede e mostra i nuovi post in modo trasparente, ma non riesco a capire come lo raggiungono.

A proposito, in questo momento sto usando un YUI Datatable

Answer 1

Grazie per le tue risposte. Questo è il mio codice di lavoro finale (ispirato a Greg e ajaxian.com ) , che utilizza alcune funzioni jQuery e funziona con la YUI DataTable .

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

Il mio prossimo passo è implementare il mio YUI Paginator per ottenere una completa integrazione con Componenti YUI :)

Answer 2

Non ho familiarità con l'elemento specifico che stai usando, ma in ordine  per implementarlo in una finestra a dimensione intera, puoi fare quanto segue:

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

Dove scrollTop è essenzialmente "quanti pixel sono stati fatti scorrere". Presumo che applicare questo al tavolo con cui stai lavorando farà il lavoro.

Answer 3

Ho appena cercato su Google e ho trovato questo articolo: Implementazione dello scorrimento dinamico con Ajax , JavaScript e XML . Sembra una spiegazione approfondita.

Answer 4

Puoi vederlo funzionare qui solo YUI. Contrariamente a una delle soluzioni suggerite sopra, la barra di scorrimento si sposta continuamente, la posizione e la dimensione riflettono la dimensione e la posizione reali dell'area visualizzabile, non carica il batch successivo quando la barra di scorrimento raggiunge il fondo. La barra di scorrimento raggiunge il fondo solo quando l'ultimo di tutti i record si trova nella parte inferiore dell'area di visualizzazione. Ovviamente, questo funziona solo se sai quanti record ci sono.

Answer 5

Esiste una proprietà che ho notato durante la lettura delle proprietà DOM in Firebug oggi chiamata scrollY (in Firebug nella scheda DOM vai su content > scrollY ) che sembra essere la quantità di pixel rimasti per scorrere sulla finestra. Prova a vedere se questo è stato creato anche per elementi scorrevoli. Quindi puoi utilizzare la funzione di Yuval per caricare nuovi dati.

Answer 6

Ick. Non è un grande fan dello scrolling infinito; interrompe alcune delle ipotesi chiave che la gente fa su come funziona il Web. Ti preghiamo di promuoverlo solo alle seguenti condizioni:

1) non lo stai sostituendo con una pagina perfettamente valida che carica tutto in una bella tabella lunga e consente all'utente di usare Ctrl-F per cercare all'interno della pagina l'ora in cui si accende Fringe.

2) non hai intenzione di inserire un annuncio nella parte inferiore di ogni blocco di dati scorrevoli.

3) stai fornendo un fallback funzionante (ehi, c'è di nuovo quel bel tavolo lungo) per i non vedenti e le persone che navigano sul Web con JavaScript disabilitato.

Answer 7

Se stai utilizzando la YUI, ha un tableScrollEvent che viene generato quando scorre la tabella. Abbinalo alla funzione generateRequest della dataTable e potresti implementare lo scrolling infinito guardando tableScrollEvent e l'avvio di una richiesta quando ti avvicini alla fine del tuo set di dati.

I documenti YUI non hanno un esempio specifico per questo caso, ma ti mostrano come gestire i dati restituiti da generateRequest