Javascript scrolling "infinito" per contenuti finiti?

Question

Ho un sacco di contenuti da visualizzare su un sito web, in modo tale che ho bisogno di utilizzare una soluzione di scorrimento "infinita" in cui il contenuto viene caricato mentre l'utente scorre verso la fine del contenuto attualmente caricato. Tuttavia, so esattamente quanti dati ci sono, e voglio che l'utente abbia una certa comprensione di ciò. Non mi piace come la barra di scorrimento appaia come se fossi quasi alla fine del contenuto, e poi improvvisamente più contenuto è caricato e il pollice/cursore si trova nel mezzo della traccia di scorrimento e più stretto.

La mia soluzione pianificata è creare un div dopo il contenuto corrente che è enorme, ma vuoto, e quindi ridurlo mentre carico più contenuti. Qualche idea migliore?

Answer 1

La mia soluzione finale è stata quella di creare una tabella all'interno del div che ha la barra di scorrimento. Ho impostato l'altezza della tabella all'altezza della quantità totale di contenuti e la prima riga all'altezza della parte del contenuto che non viene visualizzata e la riga successiva è il contenuto che viene esaminato al momento.

Ho quindi utilizzato un processo molto simile a quello utilizzato nei videogiochi a scorrimento laterale in cui si disegna solo ciò che è visibile sullo schermo o solo ciò che è vicino all'area visibile. Ho sfruttato i waypoint per tenere traccia di dove l'utente stava scorrendo, e poi ho aggiornato il contenuto visibile e usato la funzionalità scroll di jquery per mantenere l'utente nello stesso punto che stavano visualizzando. Quindi, in qualsiasi momento, solo una pagina di contenuto vale a "essere visualizzata" sopra o sotto l'area di visualizzazione corrente.

Devo notare che tutto il "contenuto" è in realtà già sul sistema del client, quindi il download non è il problema. Il problema per me è che il "contenuto" è una struttura DOM massiccia che finisce per rallentare il sistema del cliente in modo orribile se provo a gestirlo tutto in una volta. Quindi creo e visualizzo solo una parte di esso alla volta.

Ciò provoca un po 'di choppiness in quanto lo schermo viene aggiornato e danneggiato se si decide di afferrare e trascinare la barra di scorrimento sul fondo del contenuto. Se riesco a capire qualcosa di meglio, aggiornerò questo.

UPDATE ho documentato come fare questo sul mio sito: http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

Answer 2

Quando si progetta un elemento dell'interfaccia utente, la prima cosa che devi chiedere è che cosa vuoi che venga effettivamente sperimentato dall'utente finale. La soluzione ti farà apparire come se ci fosse un sacco di dati che non ci sono ancora (e se si tratta di materiale vecchio/di archivio potrebbe non essere pertinente per l'utente). Ciò potrebbe distogliere l'utente dalla lettura del contenuto perché sembra troppo lungo.

Il problema è la barra di scorrimento non è progettata per supportare il contenuto espandibile. È, come hai sottolineato, ingannevole per tali contenuti. Si potrebbe progettare una caratteristica del tutto nuova di scorrimento che fornisce informazioni complete

1. La lunghezza dei dati caricati
2. La lunghezza dei dati di scariche disponibili
3. Se si scarica dati di archivio, si consiglia di indicare separatamente quale parte dei dati caricati sono dati attuali

una barra di scorrimento colorate con uno sfondo verde che indica ciò che viene caricato e corrente, una sezione giallo che indica ciò che viene caricato, ma più vecchie di dati, e una sezione rossa che indica ciò che può essere scaricato come l'utente scr questo lo farebbe abbastanza bene.

Answer 3

È possibile inserire un carattere non appariscente alla fine del documento con estensione (ad esempio a 15k pixel) in modo che la barra di scorrimento rifletta in modo accurato la profondità della pagina, se questo è ciò che intendevi. Qualcosa del genere ...

document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');