Sto costruendo una piccola applicazione basata sul Web utilizzando una tabella HTML. Una proprietà insolita di questa tabella è che ha risolto la riga superiore e la colonna sinistra (simile a excel). Ho realizzato questo usando un po 'di jQuery e CSS.Forza javascript per l'esecuzione * prima * ridisegna browser (esempio jsFiddle)
Il problema è che l'evento jQuery che fa scattare il mio codice è il $ (window) .scroll evento, ed evidentemente maggior parte dei browser (Chrome e IE) ridisegnano pagina prima che il codice che viene chiamato da questo evento è terminato l'esecuzione. Di conseguenza, la colonna sinistra e la riga superiore richiedono una frazione di secondo per "recuperare" il resto della tabella.
Ho fornito un stripped down jsFiddle example per mostrarti il mio problema. Nota: Il ritardo non è molto evidente quando la tabella è così piccola e (relativamente parlando) vuota di contenuto. Tuttavia, è lì (supponendo che tu non stia usando Firefox). C'è un modo per sbarazzarsi di questo ritardo?
Grazie!
Forse sto fraintendendo il modo in cui funziona raf, ma sembra che non risolvesse completamente il mio problema, dal momento che il mio problema comporta che i frame vengano disegnati troppo presto. È giusto? O c'è qualcosa che non riesco a ottenere? – ihake
'requestAnimationFrame' consente di emettere comandi immediatamente prima di un nuovo aggiornamento. Quindi qualunque cosa tu cambi in requestAnimationFrame mostrerà nel prossimo ridisegno. È una richiamata che viene invocata dal browser quando sta per disegnare la pagina web. Molto probabilmente il tuo problema è dovuto alla chiamata a syncHeadColumns subito dopo la colorazione dello scroll (ciò che sospetti) oa causa di troppe callback di scroll emesse - ovvero più di 1 evento per frame. Ciò causa ritardi negli aggiornamenti visivi (personalmente ritengo che sia più probabile). In ogni caso: credo che "requestAnimationFrame" dovrebbe essere in grado di aiutare con entrambi. –
Quello che proverei è chiamare 'syncHeadColumns' da' requestAnimationFrame' invece dall'evento scroll. Questo dovrebbe ridurre la quantità di chiamate a 'syncHeadColumns' ma mantenere le intestazioni in posizione. Inoltre, potresti voler controllare come funziona il ridisegno e il reflow nei browser, se non lo sei ancora. Ci sono alcuni attributi di elemento e css che causano un riflusso quando vengono cambiati. Questo non dovrebbe essere il caso per la maggior parte degli attributi sugli elementi 'position: fixed', ma forse mi manca qualcosa nel codice che causa il reflow. –