JavaScript ritardo window.scroll provoca asincrono ridisegnare

Question

L'obiettivo

Così ho un elenco di <div> è tutto in un layout a colonna singola che hanno sia la classe "attivo" o "inattivo". La classe attiva mostra un grafico a destra dell'elemento e la classe inattiva no. L'ho configurato in modo che premendo il tasto freccia su o giù si sposti la classe "attiva" (e l'immagine con essa) alla voce precedente o successiva. Non è animato, ma puoi visivamente vedere la grafica scomparire e riapparire sul tag sopra o sotto.

Ora mi piacerebbe avere la pagina scorrere verso il basso sulla freccia premere il tasto in modo che il bordo superiore dell'articolo sia sempre nello stesso punto. Dal momento che la lista degli elementi è più grande della finestra pagina, è necessario scorrere automaticamente il browser in modo che il selezionato <div> è sempre al centro dello schermo ...

Il Codice

//Paging through items with arrow keys 
theWindow.keydown(function (e) { 
    var key = e.keyCode, 
     oldItem = $('li.active') 

    if ((key === 40 && oldItem.next().length) || (key === 38 && oldItem.prev().length)) { 
     var theWindowMod = (window.innerHeight/2) + 43, 
      theHTML = $('html'), 
      theDetail = $('.detail') 

     theHTML.addClass('notransition') 

     if (key === 40 && oldItem.next().length) { 
      oldItem.removeClass('active').next().addClass('active') 
     } else if (key === 38 && oldItem.prev().length) { 
      oldItem.removeClass('active').prev().addClass('active') 
     } 

     var newItem = $('li.active') 

     window.scroll(0, newItem.offset().top - theWindowMod) 
     e.preventDefault() 
     $('.detail-inner.active').fadeOut(0).removeClass('active') 
     $('section.active, .tab.active').removeClass('active') 
     newItem.find('.tab').add(theDetail).addClass('active') 
     theDetail.find('.detail-' + newItem.attr('class').split(' ')[0]).addClass('active').fadeIn(0) 

     setTimeout(function() { 
      theHTML.removeClass('notransition') 
     }, 1) 
    } 
}); 

Il problema

Il problema è che in tutte le versioni di Safari ma nessun altro browser, il metodo window.scroll è solo un po 'indietro rispetto alle prestazioni di commutazione della classe CSS. Quello che succede è che finiscono in due diversi eventi di ridisegno e sembra che la pagina sia "glitching" quando scorri verso il basso perché puoi vedere brevemente il grafico a destra dell'elemento successivo prima che il browser scorra verso il basso.

La Live Demo

È possibile visualizzare dal vivo qui:

http://hashtag.ly/#minecraft

Utilizzare i tasti freccia per scorrere gli elementi. Notare il salto. Come dovrei andare a risolvere questo?

Answer 1

Penso che una soluzione che evita il problema è la soluzione migliore.

Da una prospettiva UX, quando sto navigando in un sito, non mi piace quando il sito usurpa il controllo della posizione di scorrimento.

Inoltre, per le persone con browser ad alto livello (come me) attualmente ci possono essere molti spazi bianchi tra i dettagli e il post selezionato. (Vedi screenshot)

La mia raccomandazione è quella di modificare il progetto in modo che i dettagli visualizzati accanto al post selezionato e lasciare che l'utente fa lo scorrimento. Controllando la posizione dei dettagli con i CSS, quindi sono accanto al post selezionato, lo inseriremo nello stesso ciclo di rendering di tutto il resto.

I dettagli che sono più vicini al post selezionato potrebbe essere simile a questa:

Aggiornamento:

Vieni a pensarci bene, client di posta elettronica di AOL Alto ha la UX che hai implementato. In Alto, la colonna di sinistra scorre automaticamente se si naviga con i tasti. Ma, in realtà non stai scorrendo, stanno aggiungendo contenuti nell'elemento contenitore e portandolo in vista (ho dimenticato come si chiama ... virtualizzazione?). Sembra che stiano gestendo tutti gli elementi visivi e il comportamento relativi allo scorrimento, a loro volta, e che non stiano utilizzando la funzionalità nativa. Quindi, è tutta la manipolazione di CSS e DOM controllata da JS, non c'è in realtà un'invocazione scrollTo(). Questo mette tutto nello stesso ciclo di rendering.

Answer 2

Provare a utilizzare un pulsante anziché il div e utilizzare setfocus() quando viene attivato l'elemento specifico. Il browser scorrerà automaticamente per rendere sempre visibile il pulsante focalizzato. Puoi usare i CSS per far apparire il pulsante esattamente come il div.